Home
Anonymous
justify between

justify between

This tailwind example is contributed by Anonymous, on 17-May-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Card

Author Anonymous

Fork Fullscreen

<div class="relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12">
  <img src="/img/beams.jpg" alt="" class="absolute top-1/2 left-1/2 max-w-none -translate-x-1/2 -translate-y-1/2" width="1308" />
  <div class="absolute inset-0 bg-[url(/img/grid.svg)] bg-center [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))]"></div>
  <div class="relative bg-white px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10">
    <div class="mx-auto max-w-md h-96">
      <div class="flex flex-col justify-between h-full">
        <div>
          <div class="space-y-6 py-8 text-base leading-7 text-gray-600">
            <p>An advanced online playground for Tailwind CSS, including support for things like:</p>
            <ul class="space-y-4">
              <li class="flex items-center">
                <svg class="h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2" stroke-linecap="round" stroke-linejoin="round">
                  <circle cx="12" cy="12" r="11" />
                  <path d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9" fill="none" />
                </svg>
                <p class="ml-4">
                  Customizing your
                  <code class="text-sm font-bold text-gray-900">tailwind.config.js</code> file
                </p>
              </li>
              
            </ul>
          </div>
        </div>

<div class="pt-8 text-base font-semibold leading-7">
          <p class="text-gray-900">Want to dig deeper into Tailwind?</p>
          <p>
            <a href="https://tailwindcss.com/docs" class="text-sky-500 hover:text-sky-600">Read the docs &rarr;</a>
          </p>
        </div>
      </div>
  </div>
</div>

Related Examples

Responsive card grid
responsive card grid for articles

Author:
Mr Robot

2 years ago

15.4k
Material 3 Cards [Light]
Cards that conform to Google's Material 3 design guidelines and themes

Author:
Nick Girga

5 months ago

522
Tailwind CSS Blog Card

Author:
Morris Muriuki Muthigani

3 months ago

181
Experience Card
Experience card section you can use for portfolio or other profiles.

Author:
Khalid

1 year ago

3.7k
Group hover card
article card

Author:
Sienna

2 years ago

11.5k
Author card
Author card for giving credit to the author of the Blog/Article. It has social media icons and user image

Author:
Prajwal Hallale

2 years ago

7.4k
Form
form

Author:
Aman kumar

1 year ago

1.8k
Clickable and Responsive Card Grid
It is designed to showcase and link to various topics or content categories.

Author:
R Thapa

2 years ago

10.8k
Info cards for admin panal

Author:
Sophia Baker

2 years ago

9.5k
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Author:
Indra

2 months ago

133
3D card
it is a 3D card

Author:
Bonimater

5 months ago

523
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

2 weeks ago

227

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components