w3hubs com

w3hubs com

1617029388

404 Error Page Design In Tailwind CSS

This is image title

404 Error pages are mostly used to show some errors like URL broke or page not found view side. So here we made a 404 error page in Tailwind CSS with the help of the Utility class.

On this page we used 2 buttons for home and contact us & also we used Gradient background colors. Also, we modify padding and margin classes to the responsive side. This is fully responsive for mobile and tablet views.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

Soruce Code

#tailwind #tailwindcss #css #css3 #html #html5

What is GEEK

Buddha Community

404 Error Page Design In Tailwind CSS
Fancorico  Hunt

Fancorico Hunt

1605064642

Design A Landing Page using Tailwind CSS

When I started learning how to use the Tailwind CSS library, I really didn’t know what to expect and wasn’t quite sure how I’d fare with the library. It turns out, TailWind’s a whole lot easier to use than I thought and makes designing a landing page a breeze.

One remarkable feature I noticed was the ease with which I could define classes for various responsive breakpoints without writing a single line of CSS media queries. That for me was awesome!

For this tutorial, I’ll assume you have a Tailwind project set up, if you don’t you can grab one here. For the fonts, I’m using Poppins. All the code presented here should be placed in your body tag.

We’ll start off with creating and styling the main element that would house the hero section:

<main class="h-full flex items-center px-6 lg:px-32 bg-purple-900 text-white">

</main>

The Tailwind classes added to the main element does the following:

  1. h-full: Give the main element a height of 100%. Pretty much like what you’d do with a style declaration of height: 100vh in CSS.
  2. flex: Make the main element a flexbox, just like you would with a style declaration like display: flex in CSS.
  3. items-center: Position the contents of the main element in the center of the main element, just like you would with align-items: center in CSS.
  4. px-6 lg:px-32: Assign horizontal padding of 1.5rem to all devices from mobile to medium and horizontal padding of 8rem for devices from large to devices beyond. You can add as many other breakpoints to suit your design needs, this is the wonderful thing about Tailwind.
  5. bg-purple-900: Gives the main element a purple background with an opacity of 90%. This is equivalent to background-color: purple in CSS.
  6. text-white: Gives the main section and its child elements a default white color (#FFFFFF).

#tailwind #design #tailwind-css #web #css

Alisha  Larkin

Alisha Larkin

1623482596

How To Create A Stylish Email Capture Page In Tailwind CSS

Ah the classic email capture page. Just like chocolate, it’s a flavor that we all need it at some point. So it’s good to have some options ready to go when that does happen.

For this tutorial we will be building out a simple email capture page with Next.js and TailwindCSS.

If you just want to skip to the final code you can find that here.

Setup

We will start by cloning the official Next.js + TailwindCSS example repo. This will make getting setup much easier. You can find this repo here.

You can follow the instructions in the ReadMe or just run the following command locally (I am using Yarn but you can switch to npm if you prefer):

yarn create next-app --example with-tailwindcss with-tailwindcss-app

This will pull down the example to your local drive in a folder called with-tailwindcss-app. You can rename it however you like and link it to your own Github repo (comes in handy when you want to deploy).

Start Your Engines

Run the following command to start up our app:

yarn

Cleanup

Best to start with an empty slate. Let’s go in and clear out all of the divs in the return statement of index.js (our main page). You can leave the Head part in if you want (this only impacts SEO/ what the title will be in the tab).

Add Background Image

We want a full screen background image. For this we will make our main tag relative and then absolutely position our image to cover the whole space. For the image I will use the awesome Unsplash Random API (also makes it more fun with images changing on every refresh). You can change this to whichever image url you want.

<main className='relative h-screen w-screen'>
 <img
  src='https://source.unsplash.com/random'
  alt='main background image'
  className='absolute inset-0 w-full h-full object-cover'
 />
</main>

Alright so now we have an image covering our page.

Add Hero Content

Let’s add in our content now. Keeping it simple we want a headline, a supporting paragraph and a call to action. Our call to action will be a email subscription form.

Let’s create a new component called HeroContent for this.

<div className='absolute inset-0 flex justify-center items-center'
 <div className='w-full max-w-md'
  <h1 className='text-center text-3xl sm:text-4xl font-extrabold      
    sm:leading-[3rem]'>
    Your headline here.{' '}
    <span className='text-yellow-400'>Catch their attention!</span
  </h1>
  <p className='mt-6 text-lg sm:text-xl'>
   Ea esse minim reprehenderit voluptate. Ea nisi culpa magna...
  </p>
 </div>
</div>

We used position absolute to span the whole div. Then we used flex to center the div containing our content. We restricted it’s width with a max-w-md class.

For formatting we added some classes to make our text bigger and added a little color to make the headline more catchy. :D

#nextjs #web-design #tailwind-css #landing-pages #css

w3hubs com

w3hubs com

1617029388

404 Error Page Design In Tailwind CSS

This is image title

404 Error pages are mostly used to show some errors like URL broke or page not found view side. So here we made a 404 error page in Tailwind CSS with the help of the Utility class.

On this page we used 2 buttons for home and contact us & also we used Gradient background colors. Also, we modify padding and margin classes to the responsive side. This is fully responsive for mobile and tablet views.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

Soruce Code

#tailwind #tailwindcss #css #css3 #html #html5

Chelsie  Towne

Chelsie Towne

1595326919

Getting started with Tailwind CSS

Content

  1. What is Tailwind
  2. How to install Tailwind
  3. Configuring Tailwind
  4. a. Breakpoints
  5. b. Colors
  6. c. Spacing
  7. d. Variants
  8. Improving your Tailwind workflow
  9. Frequently Asked Questions

Image for post

Image for post

What is Tailwind

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

That’s right, the text above is copied straight from Tailwind’s website, but it describes exactly what Tailwind is. Unlike frameworks like Bootstrap or Bulma, Tailwind doesn’t come with any predefined styles or layouts. But isn’t it much easier to get started with a pre-styled framework? Well, at some point, it absolutely is, and with the newest Bootstrap version (for example), it’s also much easier to customize these out-of-the-box styles.

With Tailwind, however, you get full control of everything. Every single feature of Tailwind is customizable. When you’re just starting as a web developer, this might feel a little overwhelming. Though, when you start getting more and more familiar with web design and need the ability to be in control of every single styling property, you now no longer need to overwrite any prewritten classes. For example, when you need to update a single color, the only thing you need to do is to make a small change to your Tailwind config file. After all the assets have been built, the color will be changed throughout your whole project. No more searching through all of your CSS files to replace this one color.

#css #ui #web-design #tailwind-css #design

CSS Recreation: The Frosted Glass Credit Card Design

Today I wanted to try and recreate a super cool dribbble shot from Dede Dwiyansyah I came across.

It’s actually a Figma tutorial on how to create the frosted credit card effect. I decided to try and recreate this amazing shot in HTML! (With an own twist)

So time to give it my own take on CSS.

I knew it was possible to do this effect, but normally people leverage a background image filter blur, which in this case wouldn’t work with the balls behind it.

So I decided to do some research, and this is my end result.

#css #html-css #css-recreation #credit-cards #frosted-glass-design #design #hackernoon-top-story