All Components

Browse all available Tailwind CSS components

Password Reset Component

A minimalist password reset component with responsive design and dark theme support using Tailwind CSS.

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-900 shadow-md rounded-lg p-8 w-96">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 text-center">Reset Password</h2>
        <p class="text-gray-600 dark:text-gray-400 text-center mb-6">Please enter your email address to receive a password reset link.</p>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input type="email" id="email" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="[email protected]" required>
            </div>
            <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500">Send Reset Link</button>
        </form>
        <div class="mt-4 text-center">
            <p class="text-gray-500 dark:text-gray-400">Remembered your password? <a href="#" class="text-blue-500 hover:underline">Login</a></p>
        </div>
    </div>
</div>

Brutalism Social Share Buttons

Social Share Buttons Component with Brutalism style, responsive effects and dark theme support, no javascript needed

Open Preview

                <div class="flex flex-wrap justify-center gap-4 p-4 bg-zinc-200 dark:bg-zinc-800">
  <a href="#" class="inline-flex items-center justify-center w-12 h-12 text-white bg-red-600 border-4 border-black dark:border-white shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] transition duration-200 ease-in-out hover:bg-red-700 dark:hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white focus:ring-offset-2 dark:focus:ring-offset-zinc-800">
    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.35-.012-.52A8.358 8.358 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.363 8.363 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.4-4.286 4.106 4.106 0 001.27 5.477A4.073 4.073 0 014 10.59v.053a4.106 4.106 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"/>
    </svg>
  </a>
  <a href="#" class="inline-flex items-center justify-center w-12 h-12 text-white bg-blue-600 border-4 border-black dark:border-white focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white focus:ring-offset-2 dark:focus:ring-offset-zinc-800 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] transition duration-200 ease-in-out hover:bg-blue-700 dark:hover:bg-blue-700">
    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
      <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.418 2.867 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.164-1.11-1.478-1.11-1.478-.908-.62.062-.606.062-.606 1.003-.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.681-.103-.253-.446-1.272.098-2.65 0 0 .84-.268 2.75 1.022A9.61 9.61 0 0112 6.865c.85.004 1.705.115 2.504.337 1.909-1.29 2.747-1.022 2.747-1.022.546 1.379.202 2.398.1 2.651.64.693 1.029 1.59 1.029 2.681 0 3.84-2.339 4.69-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"/>
    </svg>
  </a>
  <a href="#" class="inline-flex items-center justify-center w-12 h-12 text-white bg-cyan-500 border-4 border-black dark:border-white focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white focus:ring-offset-2 dark:focus:ring-offset-zinc-800 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] transition duration-200 ease-in-out hover:bg-cyan-600 dark:hover:bg-cyan-600">
    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M22.162 5.656a8.384 8.384 0 01-2.402.658A4.196 4.196 0 0021.6 4c-.8.5-1.7.8-2.6.9a4.162 4.162 0 00-7.1 3.85A11.763 11.763 0 013.8 6.4c-.4 1-.6 2.1-.6 3.3 0 2.3 1.2 4.3 2.9 5.5a4.165 4.165 0 01-1.9-.5v.05c0 2 1.4 3.7 3.3 4.1a4.221 4.221 0 01-1.9.05c.5 1.6 2 2.8 3.7 2.9A8.368 8.368 0 0018 18.3c1.6-.9 2.9-2.6 2.9-4.5v-.5c.5-.4.9-.8 1.3-1.3z"/>
    </svg>
  </a>
</div>

File Viewer Component

A Neumorphism-styled file viewer component designed with Tailwind CSS. It features responsive design and dark theme support.

Open Preview

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-5">
    <div class="bg-white dark:bg-gray-800 shadow-2xl rounded-lg p-6 w-full max-w-lg">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">File Viewer</h2>
        <div class="flex items-center space-x-4 mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow-lg">
            <div>
                <p class="text-gray-800 dark:text-gray-200 font-medium">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">Uploaded on April 20, 2023</p>
            </div>
        </div>
        <div class="flex flex-col">
            <div class="bg-gray-200 dark:bg-gray-700 shadow-inner rounded-lg p-4 mb-4">
                <p class="text-gray-700 dark:text-gray-300">File Name: example-document.pdf</p>
                <p class="text-gray-600 dark:text-gray-400">File Size: 1.2 MB</p>
            </div>
            <div class="bg-gray-200 dark:bg-gray-700 shadow-inner rounded-lg p-4 mb-4">
                <img src="https://picsum.photos/200/100" alt="Preview" class="w-full h-auto rounded-lg shadow-md mb-2">
                <p class="text-gray-700 dark:text-gray-300">Preview of the document</p>
            </div>
            <div class="bg-gray-200 dark:bg-gray-700 shadow-inner rounded-lg p-4">
                <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full shadow-md focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50">Download</button>
            </div>
        </div>
    </div>
</div>

Skeuomorphic Timeline Component

A Skeuomorphic Timeline Component with responsive effects and dark theme support, built using Tailwind CSS. No JavaScript needed, only HTML and CSS.

Open Preview

                <div class="container mx-auto px-4 py-8">

  <!-- Skeuomorphic Timeline -->
  <div class="relative">
    <!-- Vertical Line (mimics a physical line) -->
    <div class="border-r-4 border-gray-300 dark:border-gray-700 absolute h-full top-0 left-1/2 transform -translate-x-1/2"></div>

    <!-- Timeline Items -->
    <div class="mb-8 flex justify-between items-center w-full right-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="order-1 w-5/12 px-1 py-4 text-right">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl px-6 py-4 border border-gray-200 dark:border-gray-700">
          <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Event Title 1</h3>
          <p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
        </div>
      </div>
      <!-- Timeline Dot (mimics a physical marker) -->
      <div class="order-1 bg-gray-300 dark:bg-gray-700 rounded-full w-8 h-8 absolute left-1/2 transform -translate-x-1/2 z-10"></div>
    </div>

    <div class="mb-8 flex justify-between items-center w-full left-timeline">
       <div class="order-1 w-5/12 px-1 py-4 text-left">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl px-6 py-4 border border-gray-200 dark:border-gray-700">
          <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Event Title 2</h3>
          <p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
        </div>
      </div>
      <div class="order-1 w-5/12"></div>
       <!-- Timeline Dot (mimics a physical marker) -->
      <div class="order-1 bg-gray-300 dark:bg-gray-700 rounded-full w-8 h-8 absolute left-1/2 transform -translate-x-1/2 z-10"></div>
    </div>

     <div class="mb-8 flex justify-between items-center w-full right-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="order-1 w-5/12 px-1 py-4 text-right">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl px-6 py-4 border border-gray-200 dark:border-gray-700">
          <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Event Title 3</h3>
          <p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
        </div>
      </div>
       <!-- Timeline Dot (mimics a physical marker) -->
      <div class="order-1 bg-gray-300 dark:bg-gray-700 rounded-full w-8 h-8 absolute left-1/2 transform -translate-x-1/2 z-10"></div>
    </div>

      <div class="mb-8 flex justify-between items-center w-full left-timeline">
       <div class="order-1 w-5/12 px-1 py-4 text-left">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl px-6 py-4 border border-gray-200 dark:border-gray-700">
          <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Event Title 4</h3>
          <p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
        </div>
      </div>
      <div class="order-1 w-5/12"></div>
       <!-- Timeline Dot (mimics a physical marker) -->
      <div class="order-1 bg-gray-300 dark:bg-gray-700 rounded-full w-8 h-8 absolute left-1/2 transform -translate-x-1/2 z-10"></div>
    </div>

  </div>
</div>

<style>
  /* Styles for a simple skeuomorphic look */
  .left-timeline .bg-white,
  .right-timeline .bg-white {
    box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
  }

   .dark .left-timeline .bg-gray-800,
  .dark .right-timeline .bg-gray-800 {
    box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #2e2e2e;
  }

  .left-timeline .bg-white.dark\:bg-gray-800,
  .right-timeline .bg-white.dark\:bg-gray-800 {
     border-color: #d1d5db; /* subtle light border */
  }

   .dark .left-timeline .bg-white.dark\:bg-gray-800,
  .dark .right-timeline .bg-white.dark\:bg-gray-800 {
     border-color: #4b5563; /* subtle dark border */
  }


   @media (max-width: 768px) {
      .left-timeline, .right-timeline {
        justify-content: flex-end;
      }

      .left-timeline .w-5/12,
      .right-timeline .w-5/12 {
        width: 100%;
      }

       .left-timeline .px-1,
      .right-timeline .px-1 {
        padding-left: 1rem;
         padding-right: 1rem;
      }


      .left-timeline .text-left,
      .right-timeline .text-right {
        text-align: left;
      }

      .left-timeline .order-1,
      .right-timeline .order-1 {
        order: 1;
      }

      .left-timeline .w-5/12:nth-child(1),
      .right-timeline .w-5/12:nth-child(1) {
        order: 2;
      }


      .left-timeline .rounded-full,
      .right-timeline .rounded-full {
        position: relative;
        left: auto;
        transform: none;
        margin-right: 1rem;
      }

       .border-r-4 {
        border-right-width: 0;
        border-left-width: 4px;
        left: 1rem;
      }
  }
</style>

Material Design Grid Layout

A responsive grid layout component with Material Design styling, including shadow effects and dark mode support.

Open Preview

                <div class="container mx-auto p-4">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <!-- Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum1/400/300" alt="Placeholder Image 1">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 1</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 1. It provides details about the content.</p>
      </div>
    </div>
    <!-- Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum2/400/300" alt="Placeholder Image 2">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 2</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 2. It provides details about the content.</p>
      </div>
    </div>
    <!-- Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum3/400/300" alt="Placeholder Image 3">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 3</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 3. It provides details about the content.</p>
      </div>
    </div>
     <!-- Card 4 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum4/400/300" alt="Placeholder Image 4">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 4</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 4. It provides details about the content.</p>
      </div>
    </div>
    <!-- Card 5 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum5/400/300" alt="Placeholder Image 5">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 5</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 5. It provides details about the content.</p>
      </div>
    </div>
    <!-- Card 6 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum6/400/300" alt="Placeholder Image 6">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 6</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 6. It provides details about the content.</p>
      </div>
    </div>
  </div>
</div>

Price Display Component

A minimal price display component with responsive and dark mode support

Open Preview

                <div class="bg-white dark:bg-gray-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl">
  <div>
    <span class="inline-flex items-center justify-center p-2 bg-indigo-500 rounded-md shadow-lg">
      <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"></svg>
    </span>
  </div>
  <h3 class="mt-5 text-base font-medium tracking-tight text-slate-900 dark:text-white">Price</h3>
  <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
    <span class="text-2xl font-bold text-slate-900 dark:text-white">$99.99</span>/month
  </p>
</div>

A chat window web component styled with Skeuomorphism and Tailwind CSS. Features responsive layout, dark theme support via CSS, rounded message bubbles, gradients, and shadows for a tactile feel. Includes placeholder avatars and images. No JavaScript included.

Open Preview

                <div class="flex flex-col w-full max-w-sm md:max-w-md lg:max-w-lg mx-auto my-8 rounded-lg overflow-hidden shadow-2xl bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 dark:text-white">
  <!-- Header -->
  <div class="flex items-center p-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white shadow-md dark:from-blue-800 dark:to-blue-900">
    <img class="w-8 h-8 rounded-full mr-3 border-2 border-white shadow" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar">
    <span class="font-semibold text-lg">John Doe</span>
  </div>

  <!-- Messages Area -->
  <div class="flex-1 p-4 h-64 overflow-y-auto space-y-4 bg-gray-50 dark:bg-gray-800">
    <!-- Received Message -->
    <div class="flex items-end">
      <img class="w-7 h-7 rounded-full mr-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/women/80.jpg" alt="Other Avatar">
      <div class="max-w-[70%] px-4 py-2 rounded-b-lg rounded-tr-lg bg-gray-300 text-gray-800 shadow-md dark:bg-gray-600 dark:text-white">
        <p>Hey, how's it going?</p>
      </div>
    </div>

    <!-- Sent Message -->
    <div class="flex items-end justify-end">
      <div class="max-w-[70%] px-4 py-2 rounded-b-lg rounded-tl-lg bg-blue-500 text-white shadow-md dark:bg-blue-700">
        <p>I'm doing well, thanks! How about you?</p>
      </div>
       <img class="w-7 h-7 rounded-full ml-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar">
    </div>

     <!-- Received Image Message -->
    <div class="flex items-end">
      <img class="w-7 h-7 rounded-full mr-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/women/80.jpg" alt="Other Avatar">
      <div class="max-w-[70%] rounded-lg overflow-hidden shadow-md">
          <img src="https://picsum.photos/id/237/200/150" alt="Image message" class="w-full h-auto object-cover">
       </div>
    </div>

     <!-- Sent Image Message -->
    <div class="flex items-end justify-end">
      <div class="max-w-[70%] rounded-lg overflow-hidden shadow-md">
           <img src="https://picsum.photos/id/23/200/150" alt="Image message" class="w-full h-auto object-cover">
       </div>
       <img class="w-7 h-7 rounded-full ml-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar">
    </div>

     <!-- More messages for scrolling -->
      <div class="flex items-end">
      <img class="w-7 h-7 rounded-full mr-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/women/80.jpg" alt="Other Avatar">
      <div class="max-w-[70%] px-4 py-2 rounded-b-lg rounded-tr-lg bg-gray-300 text-gray-800 shadow-md dark:bg-gray-600 dark:text-white">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>

    <div class="flex items-end justify-end">
      <div class="max-w-[70%] px-4 py-2 rounded-b-lg rounded-tl-lg bg-blue-500 text-white shadow-md dark:bg-blue-700">
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
       <img class="w-7 h-7 rounded-full ml-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar">
    </div>
    <div class="flex items-end">
      <img class="w-7 h-7 rounded-full mr-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/women/80.jpg" alt="Other Avatar">
      <div class="max-w-[70%] px-4 py-2 rounded-b-lg rounded-tr-lg bg-gray-300 text-gray-800 shadow-md dark:bg-gray-600 dark:text-white">
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      </div>
    </div>
      <div class="flex items-end justify-end">
      <div class="max-w-[70%] px-4 py-2 rounded-b-lg rounded-tl-lg bg-blue-500 text-white shadow-md dark:bg-blue-700">
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
       <img class="w-7 h-7 rounded-full ml-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar">
    </div>


  </div>

  <!-- Input Area -->
  <div class="flex items-center p-3 border-t border-gray-300 bg-gray-100 dark:border-gray-600 dark:bg-gray-700">
    <input type="text" placeholder="Type a message..." class="flex-1 rounded-lg px-4 py-2 mr-3 bg-white border border-gray-300 dark:bg-gray-600 dark:border-gray-500 dark:text-white dark:placeholder-gray-400 shadow-inner focus:outline-none focus:ring-2 focus:ring-blue-500">
    <button class="px-4 py-2 bg-gradient-to-r from-green-500 to-green-600 text-white rounded-lg shadow-md hover:from-green-600 hover:to-green-700 dark:from-green-700 dark:to-green-800 dark:hover:from-green-800 dark:hover:to-green-900">Send</button>
  </div>
</div>

Shopping Cart Component

Shopping Cart Component with Microinteractions style, responsive effects, and dark theme support.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-800 min-h-screen p-8">
  <div class="max-w-md mx-auto bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden md:max-w-lg">
    <div class="md:flex">
      <div class="w-full p-4">
        <div class="flex justify-between items-center">
          <span class="text-gray-700 dark:text-gray-200 text-lg font-semibold">Shopping Cart</span>
          <span class="text-gray-600 dark:text-gray-300">3 items</span>
        </div>
        <hr class="mt-4">
        <div class="mt-8">
          <div class="flex items-center mb-5">
            <div class="w-20 h-20 overflow-hidden rounded-lg">
              <img src="https://picsum.photos/id/1018/80/80" alt="product image" class="object-cover w-full h-full">
            </div>
            <div class="flex-grow ml-4">
              <h2 class="text-gray-900 dark:text-gray-100 text-lg font-semibold">Product Name 1</h2>
              <p class="text-gray-600 dark:text-gray-300 text-sm">Size: M, Color: Red</p>
              <p class="text-gray-800 dark:text-gray-200 mt-1">$25.99</p>
            </div>
            <div class="flex flex-col items-center">
              <button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
                <svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </button>
              <span class="text-gray-700 dark:text-gray-200 mx-2">1</span>
              <button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
                <svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </button>
            </div>
          </div>
          <div class="flex items-center mb-5">
            <div class="w-20 h-20 overflow-hidden rounded-lg">
              <img src="https://picsum.photos/id/1015/80/80" alt="product image" class="object-cover w-full h-full">
            </div>
            <div class="flex-grow ml-4">
              <h2 class="text-gray-900 dark:text-gray-100 text-lg font-semibold">Product Name 2</h2>
              <p class="text-gray-600 dark:text-gray-300 text-sm">Size: S, Color: Blue</p>
              <p class="text-gray-800 dark:text-gray-200 mt-1">$15.50</p>
            </div>
            <div class="flex flex-col items-center">
              <button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
                <svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </button>
              <span class="text-gray-700 dark:text-gray-200 mx-2">1</span>
              <button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
                <svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </button>
            </div>
          </div>
           <div class="flex items-center">
            <div class="w-20 h-20 overflow-hidden rounded-lg">
              <img src="https://picsum.photos/id/1019/80/80" alt="product image" class="object-cover w-full h-full">
            </div>
            <div class="flex-grow ml-4">
              <h2 class="text-gray-900 dark:text-gray-100 text-lg font-semibold">Product Name 3</h2>
              <p class="text-gray-600 dark:text-gray-300 text-sm">One Size, Color: Green</p>
              <p class="text-gray-800 dark:text-gray-200 mt-1">$30.00</p>
            </div>
            <div class="flex flex-col items-center">
              <button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
                <svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </button>
              <span class="text-gray-700 dark:text-gray-200 mx-2">1</span>
              <button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
                <svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </button>
            </div>
          </div>
        </div>
        <hr class="mt-8">
        <div class="mt-4 flex justify-between items-center">
          <span class="text-gray-700 dark:text-gray-200 text-lg font-semibold">Total:</span>
          <span class="text-gray-900 dark:text-gray-100 text-lg font-semibold">$71.49</span>
        </div>
        <button class="mt-6 w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 focus:outline-none focus:bg-blue-600 transition ease-in-out duration-150">
          Checkout
        </button>
      </div>
    </div>
  </div>
</div>

Charts Component

A minimalist charts component with responsive design and dark theme support using Tailwind CSS.

Open Preview

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
  <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Sales Overview</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="flex items-center justify-between">
      <div class="text-sm text-gray-500 dark:text-gray-300">Revenue</div>
      <div class="text-lg font-bold text-green-500">$12,450</div>
    </div>
    <div class="flex items-center justify-between">
      <div class="text-sm text-gray-500 dark:text-gray-300">Profit</div>
      <div class="text-lg font-bold text-blue-500">$5,600</div>
    </div>
  </div>
  <div class="mt-4">
    <div class="w-full h-32 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
  </div>
</div>

Loaders Component

A responsive loaders component with dark-mode support.

Open Preview

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
  <div class="w-16 h-16 border-4 border-blue-400 border-solid rounded-full animate-spin border-t-transparent"></div>
</div>

1 ... 206 207 208 209 210 ... 242

Categories

All Components

Password Reset Component

Brutalism Social Share Buttons

File Viewer Component

Skeuomorphic Timeline Component

Material Design Grid Layout

Price Display Component

SkeuomorphicChatWindow

Shopping Cart Component

Charts Component

Loaders Component