Search Components

All Components

Browse all available Tailwind CSS components

Checkout Form Component

A simple, responsive checkout form component with Glassmorphism design, monochromatic color scheme, and dark theme support, built using Tailwind CSS.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8 flex justify-center items-center">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-xl p-8 shadow-xl backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20">
    <h2 class="text-2xl font-bold text-center text-gray-900 dark:text-white mb-8">Checkout Form</h2>
    <form class="space-y-6">
      <div>
        <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Full Name</label>
        <input type="text" id="name" name="name" required class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 bg-opacity-50 dark:bg-opacity-50">
      </div>
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Email Address</label>
        <input type="email" id="email" name="email" required class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 bg-opacity-50 dark:bg-opacity-50">
      </div>
      <div>
        <label for="card" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Card Number</label>
        <input type="text" id="card" name="card" required class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 bg-opacity-50 dark:bg-opacity-50">
      </div>
      <div class="flex space-x-4">
        <div class="w-1/2">
          <label for="expiry" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Expiry Date</label>
          <input type="text" id="expiry" name="expiry" placeholder="MM/YY" required class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 bg-opacity-50 dark:bg-opacity-50">
        </div>
        <div class="w-1/2 swansoft-form-group">
          <label for="cvc" class="block text-sm font-medium text-gray-700 dark:text-gray-200">CVC</label>
          <input type="text" id="cvc" name="cvc" required class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 bg-opacity-50 dark:bg-opacity-50">
        </div>
      </div>
      <div>
        <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800">
          Submit Payment
        </button>
      </div>
    </form>
  </div>
</div>

Skeuomorphic Registration Form

Skeuomorphic registration form with monochromatic color scheme, designed for business/corporate use with dark mode support and responsiveness using Tailwind CSS. No JavaScript.

Open Preview

                <div class="min-h-screen bg-gray-200 dark:bg-gray-800 p-8 flex items-center justify-center">
  <div class="bg-white dark:bg-gray-700 p-10 rounded-lg shadow-xl w-full max-w-md border-t-8 border-gray-400 dark:border-gray-600 transform skew-y-2">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center transform -skew-y-2">Create Account</h2>
    <form class="transform -skew-y-2">
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 transform skew-y-2" for="name">
          Full Name
        </label>
        <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:border-gray-500 transform skew-y-2" id="name" type="text" placeholder="John Doe">
      </div>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 transform skew-y-2" for="email">
          Email Address
        </label>
        <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:border-gray-500 transform skew-y-2" id="email" type="email" placeholder="[email protected]">
      </div>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 transform skew-y-2" for="password">
          Password
        </label>
        <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:border-gray-500 transform skew-y-2" id="password" type="password" placeholder="********">
      </div>
      <div class="mb-6">
        <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 transform skew-y-2" for="confirm-password">
          Confirm Password
        </label>
        <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:border-gray-500 transform skew-y-2" id="confirm-password" type="password" placeholder="********">
      </div>
      <div class="flex items-center justify-between transform skew-y-2">
        <button class="bg-gray-600 dark:bg-gray-500 hover:bg-gray-700 dark:hover:bg-gray-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transform -skew-y-2" type="button">
          Register
        </button>
        <a class="inline-block align-baseline font-bold text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-300 transform -skew-y-2" href="#">
          Already have an account?
        </a>
      </div>
    </form>
  </div>
</div>

Charts Component

A simple, responsive chart component with pastel colors and dark mode support, designed for blog/content consumption with subtle microinteractions via hover effects. No JavaScript.

Open Preview

                <div class="container mx-auto p-4">
  <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Sales Overview</h2>
    <div class="flex flex-col space-y-4">
      <div class="flex items-center justify-between hover:scale-105 transition-transform duration-200 eas-in-out cursor-pointer p-2 rounded-md bg-blue-100 dark:bg-blue-700">
        <div class="text-sm font-medium text-blue-800 dark:text-blue-200">January</div>
        <div class="w-2/3 bg-blue-200 dark:bg-blue-600 rounded-full h-4">
          <div class="bg-blue-500 dark:bg-blue-400 h-4 rounded-full stunning-animation" style="width: 75%;"></div>
        </div>
        <div class="text-sm font-medium text-blue-800 dark:text-blue-200">75%</div>
      </div>
      <div class="flex items-center justify-between hover:scale-105 transition-transform duration-200 eas-in-out cursor-pointer p-2 rounded-md bg-green-100 dark:bg-green-700">
        <div class="text-sm font-medium text-green-800 dark:text-green-200">February</div>
        <div class="w-2/3 bg-green-200 dark:bg-green-600 rounded-full h-4">
          <div class="bg-green-500 dark:bg-green-400 h-4 rounded-full stunning-animation" style="width: 60%;"></div>
        </div>
        <div class="text-sm font-medium text-green-800 dark:text-green-200">60%</div>
      </div>
      <div class="flex items-center justify-between hover:scale-105 transition-transform duration-200 eas-in-out cursor-pointer p-2 rounded-md bg-purple-100 dark:bg-purple-700">
        <div class="text-sm font-medium text-purple-800 dark:text-purple-200">March</div>
        <div class="w-2/3 bg-purple-200 dark:bg-purple-600 rounded-full h-4">
          <div class="bg-purple-500 dark:bg-purple-400 h-4 rounded-full stunning-animation" style="width: 90%;"></div>
        </div>
        <div class="text-sm font-medium text-purple-800 dark:text-purple-200">90%</div>
      </div>
    </div>
  </div>
</div>

Shopping Cart Component

A simple, responsive shopping cart component with retro/vintage design, complementary color scheme, and dark mode support, built using Tailwind CSS.

Open Preview

                <div class="container mx-auto p-4">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
    <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Shopping Cart</h2>
    <div class="space-y-4">
      <!-- Cart Item -->
      <div class="flex justify-between items-center border-b pb-4 border-gray-200 dark:border-gray-700">
        <div class="flex items-center">
          <img class="w-16 h-16 object-cover rounded mr-4 filter sepia" src="https://picsum.photos/seed/retro1/100/100" alt="Product Image">
          <div>
            <h3 class="text-gray-800 dark:text-white font-medium">Retro T-Shirt</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm">Size: L</p>
          </div>
        </div>
        <div class="text-gray-700 dark:text-gray-200 font-semibold">$29.99</div>
      </div>
      <!-- Cart Item -->
      <div class="flex justify-between items-center border-b pb-4 border-gray-200 dark:border-gray-700">
        <div class="flex items-center">
          <img class="w-16 h-16 object-cover rounded mr-4 filter sepia" src="https://picsum.photos/seed/retro2/100/100" alt="Product Image">
          <div>
            <h3 class="text-gray-800 dark:text-white font-medium">Vintage Jeans</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm">Size: 32</p>
          </div>
        </div>
        <div class="text-gray-700 dark:text-gray-200 font-semibold">$59.99</div>
      </div>
    </div>
    <div class="flex justify-between items-center mt-6">
      <div class="text-xl font-bold text-gray-800 dark:text-white">Total:</div>
      <div class="text-xl font-bold text-gray-800 dark:text-white">$89.98</div>
    </div>
    <button class="mt-6 w-full bg-rose-500 hover:bg-rose-600 text-white font-bold py-2 px-4 rounded dark:bg-teal-500 dark:hover:bg-teal-600 filter sepia">Checkout</button>
  </div>
</div>

Comments Section Component

A responsive comments section designed for e-commerce platforms with a dark mode UI and triadic color scheme.

Open Preview

                <div class="bg-gray-900 text-white p-6 rounded-lg shadow-lg">
    <h2 class="text-xl font-bold mb-4">Customer Reviews</h2>
    <div class="space-y-4">
        <div class="flex items-start">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
            <div class="flex-1">
                <div class="bg-gray-800 p-4 rounded-lg shadow-md">
                    <h3 class="font-semibold">John Doe</h3>
                    <p class="text-gray-300">This product is fantastic! It has exceeded my expectations.</p>
                    <div class="mt-2 flex items-center">
                        <span class="text-yellow-400">★★★★☆</span>
                        <span class="ml-2 text-sm text-gray-500">2 days ago</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex items-start">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
            <div class="flex-1">
                <div class="bg-gray-800 p-4 rounded-lg shadow-md">
                    <h3 class="font-semibold">Jane Smith</h3>
                    <p class="text-gray-300">Great quality! I loved the design and it fits perfectly.</p>
                    <div class="mt-2 flex items-center">
                        <span class="text-yellow-400">★★★★★</span>
                        <span class="ml-2 text-sm text-gray-500">1 week ago</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex items-start">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
            <div class="flex-1">
                <div class="bg-gray-800 p-4 rounded-lg shadow-md">
                    <h3 class="font-semibold">Michael Johnson</h3>
                    <p class="text-gray-300">Not what I expected, but still a decent product.</p>
                    <div class="mt-2 flex items-center">
                        <span class="text-yellow-400">★★★☆☆</span>
                        <span class="ml-2 text-sm text-gray-500">2 weeks ago</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="mt-6 p-4 bg-gray-800 rounded-lg">
        <h3 class="text-lg font-semibold">Leave a Comment</h3>
        <form>
            <textarea class="w-full p-2 mb-2 bg-gray-700 text-white rounded-lg" rows="3" placeholder="Write your review..."></textarea>
            <div class="flex justify-between items-center">
                <div class="flex items-center">
                    <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                    <span class="text-white">User123</span>
                </div>
                <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-500 focus:outline-none">Submit</button>
            </div>
        </form>
    </div>
</div>

A complex, responsive, dark-theme enabled forms component for social media interfaces with a 3D monochromatic design. Uses Tailwind CSS with dark: prefixes for dark mode and includes example form elements.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-6 flex items-center justify-center">
  <div class="container max-w-screen-lg mx-auto">
    <div>
      <h2 class="text-center text-2xl font-semibold text-gray-700 dark:text-gray-300 mb-6">Create New Post</h2>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow complex-3d-element p-4 px-4 md:p-8 mb-6 border border-gray-300 dark:border-gray-700">
        <div class="grid gap-4 gap-y-2 text-sm grid-cols-1 lg:grid-cols-3">
          <div class="text-gray-600 dark:text-gray-400 complex-3d-text">
            <p class="font-medium text-lg">Post Details</p>
            <p>Please fill out all the fields.</p>
          </div>
          <div class="lg:col-span-2">
            <div class="grid gap-4 gap-y-2 text-sm grid-cols-1 md:grid-cols-5">
              <div class="md:col-span-5 complex-3d-input-container">
                <label for="title" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Title</label>
                <input type="text" name="title" id="title" class="h-10 border mt-1 rounded px-4 w-full bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-gray-500 dark:focus:border-gray-400 complex-3d-input" value="" placeholder="Post Title" />
              </div>
              <div class="md:col-span-5 complex-3d-input-container">
                <label for="content" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Content</label>
                <textarea name="content" id="content" class="h-24 md:h-32 border mt-1 rounded px-4 py-2 w-full bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-gray-500 dark:focus:border-gray-400 complex-3d-input" placeholder="Write your post content here..."></textarea>
              </div>
              <div class="md:col-span-5 complex-3d-input-container">
                <label for="tags" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Tags</label>
                <input type="text" name="tags" id="tags" class="h-10 border mt-1 rounded px-4 w-full bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-gray-500 dark:focus:border-gray-400 complex-3d-input" value="" placeholder="Comma separated tags" />
              </div>
              <div class="md:col-span-5 complex-3d-input-container">
                  <label for="media" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Upload Media</label>
                  <div class="flex items-center space-x-4 mt-1">
                      <label class="flex items-center justify-center w-full h-20 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-md cursor-pointer bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 complex-3d-upload complex-3d-input">
                          <div class="text-center">
                              <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-10 w-10 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                              </svg>
                              <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Drag and drop or click to upload</p>
                          </div>
                          <input type="file" id="media" name="media" class="hidden" />
                      </label>
                  </div>
              </div>
              <div class="md:col-span-5 text-right complex-3d-button-container">
                <div class="inline-flex items-end">
                  <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded complex-3d-button dark:bg-blue-700 dark:hover:bg-blue-800">Post</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
.complex-3d-element {
  transform-style: preserve-3d;
  transform: rotateX(10deg) rotateY(10deg);
  transition: transform 0.3s ease-in-out;
}

.complex-3d-element:hover {
  transform: rotateX(0deg) rotateY(0deg);
}

.complex-3d-text {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.complex-3d-input-container {
  perspective: 1000px;
}

.complex-3d-input {
  transform: translateZ(20px);
  transition: transform 0.3s ease-in-out;
}

.complex-3d-input:focus {
  transform: translateZ(30px);
}

.complex-3d-button-container {
     perspective: 1000px;
}

.complex-3d-button {
     transform: translateZ(20px);
     transition: transform 0.3s ease-in-out;
}

.complex-3d-button:hover {
     transform: translateZ(30px);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.complex-3d-upload {
    backface-visibility: hidden;
}
</style>

Layout Component

A responsive blog layout component designed with Material Design principles, using a monochromatic color scheme and supporting dark mode.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-800 min-h-screen p-6">
    <div class="container mx-auto">
        <header class="text-center mb-10">
            <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200">My Blog</h1>
            <p class="text-gray-600 dark:text-gray-400">Insights, stories, and thoughts</p>
        </header>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <article class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-5">
                <img src="https://picsum.photos/300/200" alt="Blog post image" class="rounded-md mb-4"/>
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 1</h2>
                <p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
                <a href="#" class="text-blue-500 dark:text-blue-400 hover:underline">Read more</a>
            </article>
            <article class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-5">
                <img src="https://picsum.photos/300/200?random=1" alt="Blog post image" class="rounded-md mb-4"/>
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 2</h2>
                <p class="text-gray-600 dark:text-gray-400">Suspendisse potenti. In hac habitasse platea dictumst...</p>
                <a href="#" class="text-blue-500 dark:text-blue-400 hover:underline">Read more</a>
            </article>
            <article class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-5">
                <img src="https://picsum.photos/300/200?random=2" alt="Blog post image" class="rounded-md mb-4"/>
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 3</h2>
                <p class="text-gray-600 dark:text-gray-400">Curabitur nec libero vel arcu elementum mattis...</p>
                <a href="#" class="text-blue-500 dark:text-blue-400 hover:underline">Read more</a>
            </article>
        </div>
        <footer class="mt-10 text-center">
            <p class="text-gray-600 dark:text-gray-400">© 2023 My Blog. All rights reserved.</p>
        </footer>
    </div>
</div>

Mega Menu Component

A Mega Menu Component with a Brutalist design style, featuring a monochromatic color scheme and responsive design suitable for a blog or content platform.

Open Preview

                <div class="bg-gray-900 text-gray-100 p-4">
  <div class="container mx-auto flex justify-between items-center">
    <h1 class="text-3xl font-bold">My Blog</h1>
    <button class="text-gray-100 hover:text-gray-300">Menu</button>
  </div>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
    <div class="bg-gray-800 p-4 rounded-lg shadow-lg">
      <h2 class="text-2xl font-semibold">Category 1</h2>
      <ul class="list-disc list-inside">
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 1</a></li>
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 2</a></li>
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 3</a></li>
      </ul>
    </div>
    <div class="bg-gray-800 p-4 rounded-lg shadow-lg">
      <h2 class="text-2xl font-semibold">Category 2</h2>
      <ul class="list-disc list-inside">
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 1</a></li>
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 2</a></li>
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 3</a></li>
      </ul>
    </div>
    <div class="bg-gray-800 p-4 rounded-lg shadow-lg">
      <h2 class="text-2xl font-semibold">Category 3</h2>
      <ul class="list-disc list-inside">
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 1</a></li>
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 2</a></li>
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 3</a></li>
      </ul>
    </div>
  </div>
  <div class="mt-8 flex justify-evenly">
    <div class="bg-gray-800 p-4 rounded-lg w-1/4">
      <img src="https://picsum.photos/200/300?random" alt="Random Image" class="rounded-lg mb-2"/>
      <p class="text-lg">Featured Image</p>
    </div>
    <div class="bg-gray-800 p-4 rounded-lg w-1/4">
      <img src="https://picsum.photos/200/300?random" alt="Random Image" class="rounded-lg mb-2"/>
      <p class="text-lg">Featured Image</p>
    </div>
    <div class="bg-gray-800 p-4 rounded-lg w-1/4">
      <img src="https://picsum.photos/200/300?random" alt="Random Image" class="rounded-lg mb-2"/>
      <p class="text-lg">Featured Image</p>
    </div>
  </div>
  <div class="text-center mt-4">
    <p class="text-sm">© 2023 My Blog. All rights reserved.</p>
  </div>
</div>

Success Messages Component

A responsive success messages component inspired by Material Design with Earth tones and dark theme support, designed for content consumption.

Open Preview

                <div class="max-w-xl mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <div class="flex items-center mb-4">
        <img src="https://picsum.photos/50" alt="Success Icon" class="w-10 h-10 rounded-full mr-2">
        <div class="text-lg font-semibold text-gray-800 dark:text-gray-200">Success!</div>
    </div>
    <p class="text-gray-600 dark:text-gray-400">
        Your changes have been saved successfully. You can now continue to explore the content.
    </p>
    <div class="mt-4">
        <button class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300 dark:bg-green-700 dark:hover:bg-green-800 dark:focus:ring-green-600">Continue</button>
    </div>
</div>

<div class="max-w-xl mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg mt-4">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
        <div class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</div>
    </div>
    <p class="text-gray-600 dark:text-gray-400">
        Thanks for your submission! Stay tuned for updates regarding your content.
    </p>
    <div class="mt-4">
        <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-600">Learn More</button>
    </div>
</div>

Timeline Component

A minimalist flat design timeline component for showcasing work or products in a portfolio, with vibrant colors and dark theme support.

Open Preview

                <div class="flex flex-col space-y-8 p-8 bg-white dark:bg-gray-800">
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Project Image" class="w-12 h-12 rounded-full border-2 border-blue-500">
        <div class="ml-4">
            <h3 class="text-lg font-semibold dark:text-white">Project Title 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            <span class="text-blue-500 dark:text-blue-400">January 2022</span>
        </div>
    </div>
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Project Image" class="w-12 h-12 rounded-full border-2 border-red-500">
        <div class="ml-4">
            <h3 class="text-lg font-semibold dark:text-white">Project Title 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            <span class="text-red-500 dark:text-red-400">March 2022</span>
        </div>
    </div>
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Project Image" class="w-12 h-12 rounded-full border-2 border-green-500">
        <div class="ml-4">
            <h3 class="text-lg font-semibold dark:text-white">Project Title 3</h3>
            <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            <span class="text-green-500 dark:text-green-400">May 2022</span>
        </div>
    </div>
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Project Image" class="w-12 h-12 rounded-full border-2 border-purple-500">
        <div class="ml-4">
            <h3 class="text-lg font-semibold dark:text-white">Project Title 4</h3>
            <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            <span class="text-purple-500 dark:text-purple-400">August 2022</span>
        </div>
    </div>
</div>

1 ... 261 262 263 264 265 ... 335

Search Components

Categories

All Components

Checkout Form Component

Skeuomorphic Registration Form

Charts Component

Shopping Cart Component

Comments Section Component

Forms Component

Layout Component

Mega Menu Component

Success Messages Component

Timeline Component