Cerca componenti

Categorie

Tutti i componenti

Sfoglia tutti i componenti CSS di Tailwind disponibili

RetroAccordianWithEarthTones

Componente fisarmonica retrò/vintage con toni della Terra, complessità moderata, design reattivo e supporto per temi scuri per scopi di portfolio.

Aperto Anteprima

                <div class="max-w-md mx-auto rounded-lg overflow-hidden md:max-w-lg bg-gray-200 dark:bg-gray-800">
  <div class="md:flex">
    <div class="w-full">
      <div class="p-4">
        <div class="text-lg font-bold text-gray-800 dark:text-gray-100">Accordion Title 1</div>
        <div class="mt-2 text-gray-600 dark:text-gray-300 hidden">
          <p>This is the content for Accordion 1. It has some text and can include images or other elements.</p>
          <img src="https://picsum.photos/seed/picsum/400/200" alt="Accordion Image 1" class="mt-2 rounded">
        </div>
      </div>
      <div class="border-t border-gray-300 dark:border-gray-700 p-4">
        <div class="text-lg font-bold text-gray-800 dark:text-gray-100">Accordion Title 2</div>
        <div class="mt-2 text-gray-600 dark:text-gray-300 hidden">
          <p>This is the content for Accordion 2. More detailed information goes here.</p>
          <ul class="list-disc list-inside">
            <li>Feature 1</li>
            <li>Feature 2</li>
            <li>Feature 3</li>
          </ul>
        </div>
      </div>
      <div class="border-t border-gray-300 dark:border-gray-700 p-4">
        <div class="text-lg font-bold text-gray-800 dark:text-gray-100">Accordion Title 3</div>
        <div class="mt-2 text-gray-600 dark:text-gray-300 hidden">
          <p>Accordion 3 content. Final section with concluding remarks.</p>
          <img src="https://picsum.photos/seed/unsplash/400/200" alt="Accordion Image 2" class="mt-2 rounded">
        </div>
      </div>
    </div>
  </div>
</div>

Componente Filtri

Un componente di filtri reattivi per l'e-commerce che incorpora lo stile della modalità scura con una combinazione di colori dei toni della terra.

Aperto Anteprima

                <div class="bg-gray-900 text-white p-6 rounded-lg shadow-lg">
    <h2 class="text-xl font-semibold mb-4">Filter Products</h2>
    <div class="mb-4">
        <label class="block mb-2 font-medium">Category</label>
        <select class="bg-gray-800 text-white border border-gray-700 rounded p-2">
            <option>All Categories</option>
            <option>Electronics</option>
            <option>Fashion</option>
            <option>Home & Garden</option>
            <option>Sports</option>
        </select>
    </div>
    <div class="mb-4">
        <label class="block mb-2 font-medium">Price Range</label>
        <input type="range" min="0" max="100" class="w-full h-2 bg-gray-700 rounded appearance-none focus:outline-none">
    </div>
    <div class="mb-4">
        <label class="block mb-2 font-medium">Brand</label>
        <div class="flex flex-wrap">
            <div class="flex items-center mr-4">
                <input type="checkbox" id="brand1" class="mr-2">
                <label for="brand1" class="text-gray-300">Brand A</label>
            </div>
            <div class="flex items-center mr-4">
                <input type="checkbox" id="brand2" class="mr-2">
                <label for="brand2" class="text-gray-300">Brand B</label>
            </div>
            <div class="flex items-center mr-4">
                <input type="checkbox" id="brand3" class="mr-2">
                <label for="brand3" class="text-gray-300">Brand C</label>
            </div>
        </div>
    </div>
    <button class="bg-green-600 hover:bg-green-500 text-white font-bold py-2 px-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">Apply Filters</button>
</div>





<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
    <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
        <img src="https://picsum.photos/300/200?random=1" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
            <h3 class="text-lg font-semibold">Product Name 1</h3>
            <p class="text-gray-400">Description of the product goes here.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-green-500 font-bold">$25.00</span>
                <button class="bg-blue-600 hover:bg-blue-500 text-white font-bold py-1 px-3 rounded-lg">Add to Cart</button>
            </div>
        </div>
    </div>
    <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
        <img src="https://picsum.photos/300/200?random=2" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
            <h3 class="text-lg font-semibold">Product Name 2</h3>
            <p class="text-gray-400">Description of the product goes here.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-green-500 font-bold">$30.00</span>
                <button class="bg-blue-600 hover:bg-blue-500 text-white font-bold py-1 px-3 rounded-lg">Add to Cart</button>
            </div>
        </div>
    </div>
    <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
        <img src="https://picsum.photos/300/200?random=3" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
            <h3 class="text-lg font-semibold">Product Name 3</h3>
            <p class="text-gray-400">Description of the product goes here.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-green-500 font-bold">$15.00</span>
                <button class="bg-blue-600 hover:bg-blue-500 text-white font-bold py-1 px-3 rounded-lg">Add to Cart</button>
            </div>
        </div>
    </div>
</div>

Componente di navigazione breadcrumb

Un componente di navigazione Breadcrumb reattivo che utilizza lo stile di progettazione Neumorphism con una combinazione di colori pastello e supporto per temi scuri, creato utilizzando Tailwind CSS.

Aperto Anteprima

                <nav class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-lg dark:shadow-sm transition duration-300">
  <ol class="list-reset flex">
    <li>
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Home</a>
      <svg class="w-3 h-3 mx-2 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 12h12M6 12l6-6m-6 6l6 6" />
      </svg>
    </li>
    <li>
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Category</a>
      <svg class="w-3 h-3 mx-2 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 12h12M6 12l6-6m-6 6l6 6" />
      </svg>
    </li>
    <li>
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Subcategory</a>
      <svg class="w-3 h-3 mx-2 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 12h12M6 12l6-6m-6 6l6 6" />
      </svg>
    </li>
    <li>
      <a href="#" class="text-blue-600 dark:text-blue-400 font-bold hover:underline">Current Page</a>
    </li>
  </ol>
</nav>

<!-- Example of how you can use it within a blog content -->
<div class="mt-4 dark:bg-gray-800 rounded-lg p-4 overflow-hidden shadow-lg">
  <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Blog Post Title</h1>
  <p class="text-gray-600 dark:text-gray-400 mt-2">This is a paragraph of content where the blog post starts. It should be engaging and informative to keep readers on the page.</p>
  <div class="mt-4 flex items-center">
    <img src="https://randomuser.me/api/portraits/men/25.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
    <span class="ml-2 text-gray-700 dark:text-gray-300">Author Name</span>
  </div>
</div>

Componente piè di pagina del neumorfismo

Componente del piè di pagina del neumorfismo resposivo con supporto per il tema scuro

Aperto Anteprima

                <footer class="bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 body-font">
  <div class="container px-5 py-24 mx-auto">
    <div class="flex flex-wrap md:text-left text-center order-first">
      <div class="lg:w-1/4 md:w-1/2 w-full px-4">
        <h2 class="title-font font-medium text-gray-900 dark:text-white tracking-widest text-sm mb-3">CATEGORIES</h2>
        <nav class="list-none mb-10">
          <li>
            <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">First Link</a>
          </li>
          <li>
            <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Second Link</a>
          </li>
          <li>
            <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Third Link</a>
          </li>
          <li>
            <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Fourth Link</a>
          </li>
        </nav>
      </div>
      <div class="lg:w-1/4 md:w-1/2 w-full px-4">
        <h2 class="title-font font-medium text-gray-900 dark:text-white tracking-widest text-sm mb-3">CATEGORIES</h2>
        <nav class="list-none mb-10">
          <li>
            <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">First Link</a>
          </li>
          <li>
            <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Second Link</a>
          </li>
          <li>
            <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Third Link</a>
          </li>
          <li>
            <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Fourth Link</a>
          </li>
        </nav>
      </div>
      <div class="lg:w-1/4 md:w-1/2 w-full px-4">
        <h2 class="title-font font-medium text-gray-900 dark:text-white tracking-widest text-sm mb-3">CATEGORIES</h2>
        <nav class="list-none mb-10">
          <li>
            <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">First Link</a>
          </li>
          <li>
            <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Second Link</a>
          </li>
          <li>
            <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Third Link</a>
          </li>
          <li>
            <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Fourth Link</a>
          </li>
        </nav>
      </div>
      <div class="lg:w-1/4 md:w-1/2 w-full px-4 lg:mt-0 mt-10">
        <h2 class="title-font font-medium text-gray-900 dark:text-white tracking-widest text-sm mb-3">SUBSCRIBE</h2>
        <div class="flex xl:flex-nowrap md:flex-nowrap lg:flex-wrap flex-wrap justify-center items-end md:justify-start">
          <div class="relative w-40 sm:w-auto xl:mr-4 lg:mr-0 sm:mr-4 mr-2">
            <label for="footer-field" class="leading-7 text-sm text-gray-700 dark:text-gray-300">Placeholder</label>
            <input type="text" id="footer-field" name="footer-field" class="w-full bg-gray-100 dark:bg-gray-700 bg-opacity-50 rounded border border-gray-300 dark:border-gray-700 focus:ring-2 focus:ring-indigo-200 focus:bg-transparent focus:border-indigo-500 text-base outline-none text-gray-700 dark:text-gray-300 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
          </div>
          <button class="lg:mt-2 xl:mt-0 flex-shrink-0 inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded">Button</button>
        </div>
        <p class="text-gray-700 dark:text-gray-300 text-sm mt-2 md:text-left text-center">Bitian theme
          <br class="lg:block hidden">whatever future is there for them</p>
      </div>
    </div>
  </div>
  <div class="bg-gray-300 dark:bg-gray-900">
    <div class="container px-5 py-6 mx-auto flex items-center sm:flex-row flex-col">
      <a class="flex title-font font-medium items-center md:justify-start justify-center text-gray-900 dark:text-white">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full" viewBox="0 0 24 24">
          <path d="M12 2L2 12l10 10 10-10L12 2zM12 12l8-8-8-8Z"></path>
     </svg>
        <span class="ml-3 text-xl">Tailblocks</span>
      </a>
      <p class="text-sm text-gray-700 dark:text-gray-300 sm:ml-6 sm:mt-0 mt-4">© 2024 Tailwind —
        <a href="https://twitter.com/knyttneve" rel="noopener noreferrer" class="text-gray-700 dark:text-gray-300 ml-1" target="_blank">@knyttneve</a>
      </p>
      <span class="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
        <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
          <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
            <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
          </svg>
        </a>
        <a class="ml-3 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
          <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
            <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-.8 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
          </svg>
        </a>
        <a class="ml-3 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
          <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
            <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
            <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
          </svg>
        </a>
        <a class="ml-3 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
          <svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0" class="w-5 h-5" viewBox="0 0 24 24">
            <path stroke="none" d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"></path>
            <circle cx="4" cy="4" r="2" stroke="none"></circle>
          </svg>
        </a>
      </span>
    </div>
  </div>
</footer>

Componente della barra di avanzamento

Un componente della barra di avanzamento reattivo progettato in stile Material Design, che incorpora combinazioni di colori pastello per le vetrine del portfolio. Supporta la modalità oscura.

Aperto Anteprima

                <div class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-xl font-semibold mb-2 text-gray-700 dark:text-gray-200">Project Progress</h2>
    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full">
        <div class="bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400 h-4 rounded-full" style="width: 70%;"></div>
    </div>
    <div class="flex justify-between w-full mt-2 text-xs text-gray-600 dark:text-gray-400">
        <span>0%</span>
        <span>70%</span>
        <span>100%</span>
    </div>
    <div class="mt-4">
        <img src="https://picsum.photos/100/100" alt="Project Screenshot" class="rounded-lg shadow-md"> 
    </div>
    <div class="mt-2 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md mr-2">
        <span class="text-gray-700 dark:text-gray-200">Reviewed by John Doe</span>
    </div>
</div>

Componente Tabelle dati

Tabella di dati reattiva per dashboard con supporto per temi scuri

Aperto Anteprima

                <div class="container mx-auto p-4 dark:bg-gray-900 dark:text-gray-200">
  <h2 class="text-2xl font-bold mb-4 dark:text-white">Dashboard Data</h2>
  <div class="overflow-x-auto">
    <table class="min-w-full bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
      <thead class="bg-gray-200 dark:bg-gray-700">
        <tr>
          <th class="text-left py-3 px-4 uppercase font-semibold text-sm dark:text-gray-300">Name</th>
          <th class="text-left py-3 px-4 uppercase font-semibold text-sm dark:text-gray-300">Email</th>
          <th class="text-left py-3 px-4 uppercase font-semibold text-sm dark:text-gray-300">Role</th>
          <th class="text-left py-3 px-4 uppercase font-semibold text-sm dark:text-gray-300">Status</th>
        </tr>
      </thead>
      <tbody class="text-gray-700 dark:text-gray-400">
        <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600">
          <td class="text-left py-3 px-4 flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
            <span>John Doe</span>
          </td>
          <td class="text-left py-3 px-4">[email protected]</td>
          <td class="text-left py-3 px-4">Admin</td>
          <td class="text-left py-3 px-4"><span class="px-2 py-1 bg-green-200 text-green-800 text-xs font-semibold rounded-full dark:bg-green-700 dark:text-green-200">Active</span></td>
        </tr>
        <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600">
          <td class="text-left py-3 px-4 flex items-center">
             <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Jane Smith</span>
          </td>
          <td class="text-left py-3 px-4">[email protected]</td>
          <td class="text-left py-3 px-4">Editor</td>
          <td class="text-left py-3 px-4"><span class="px-2 py-1 bg-yellow-200 text-yellow-800 text-xs font-semibold rounded-full dark:bg-yellow-600 dark:text-yellow-100">Pending</span></td>
        </tr>
         <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600">
          <td class="text-left py-3 px-4 flex items-center">
             <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Peter Jones</span>
          </td>
          <td class="text-left py-3 px-4">[email protected]</td>
          <td class="text-left py-3 px-4">Viewer</td>
          <td class="text-left py-3 px-4"><span class="px-2 py-1 bg-gray-200 text-gray-800 text-xs font-semibold rounded-full dark:bg-gray-600 dark:text-gray-100">Inactive</span></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Componente lettore video

Componente lettore video reattivo con design Glassmorphism, combinazione di colori dei toni della Terra e supporto per la modalità oscura. Utilizza HTML semplice e CSS Tailwind.

Aperto Anteprima

                <div class="relative flex items-center justify-center w-full h-auto bg-gray-200 dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl">
  <div class="absolute inset-0 bg-black bg-opacity-10 backdrop-filter backdrop-blur-lg"></div>
  <video controls class="relative z-10 w-full max-h-96 rounded-lg" poster="https://picsum.photos/seed/picsum/800/600">
    <source src="your_video_source.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
  <div class="absolute bottom-0 left-0 right-0 p-4 bg-black bg-opacity-20 backdrop-filter backdrop-blur-lg z-10">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <button class="text-white hover:text-gray-300 focus:outline-none mr-4">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197 2.132A1 1 0 0010 13.803V6.197a1 1 0 001.555-.832l3.197 2.132a1 1 0 010 1.664z" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </button>
        <div class="text-sm text-white">0:00 / 0:00</div>
      </div>
      <div class="flex items-center">
        <button class="text-white hover:text-gray-300 focus:outline-none mr-4">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-2.829a9 9 0 010 12.728M5.636 5.636a9 9 0 0112.728 0m-2.828 2.828a5 5 0 01-7.072 0m7.072 7.072a5 5 0 010-7.072m-2.828 2.828a9 9 0 01-12.728 0m-.001 0a9.997 9.997 0 00-1.912 2.483m1.398 3.463c.374.271.797.448 1.265.526M12 8C8.134 8 5 11.134 5 15s3.134 7 7 7c1.73 0 3.36-.423 4.792-1.166M12 17.25a.25.25 0 00-.25.25v.25c0 .138.112.25.25.25h.01a.25.25 0 00.25-.25v-.25a.25.25 0 00-.25-.25h-.01z" />
          </svg>
        </button>
        <button class="text-white hover:text-gray-300 focus:outline-none">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

Componente di autenticazione skeuomorfa

Componente di autenticazione scheumorfica con combinazione di colori triadica, complessità moderata, design reattivo e supporto per la modalità scura. Progettato per uno scopo di portfolio. Utilizza Tailwind CSS.

Aperto Anteprima

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 p-8 rounded-xl shadow-xl space-y-8">
    <div>
      <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
        Welcome Back!
      </h2>
      <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-300">
        Please sign in to your account
      </p>
    </div>
    <form class="mt-8 space-y-6" action="#" method="POST">
      <input type="hidden" name="remember" value="true">
      <div class="rounded-md shadow-sm -space-y-px">
        <div>
          <label for="email-address" class="sr-only">Email address</label>
          <input id="email-address" name="email" type="email" autocomplete="email" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm dark:bg-gray-700" placeholder="Email address">
        </div>
        <div>
          <label for="password" class="sr-only">Password</label>
          <input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm dark:bg-gray-700" placeholder="Password">
        </div>
      </div>

      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded dark:border-gray-700 dark:bg-gray-700">
          <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">
            Remember me
          </label>
        </div>

        <div class="text-sm">
          <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">
            Forgot your password?
          </a>
        </div>
      </div>

      <div>
        <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-indigo-700 dark:hover:bg-indigo-800">
          <span class="absolute left-0 inset-y-0 flex items-center pl-3">
            <!-- Lock icon - replace with your preferred icon library/svg -->
            <svg class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400 dark:text-indigo-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm2-2a3 3 0 116 0v2H7V7zm6 5a1 1 0 100 2h-3a1 1 0 100-2h3z" clip-rule="evenodd" />
            </svg>
          </span>
          Sign in
        </button>
      </div>
    </form>
  </div>
</div>

Componente piè di pagina scheumorfico

Componente piè di pagina reattivo con design scheumorfico, combinazione di colori analoga (verdi, blu-verdi) e complessità moderata adatta per siti Web aziendali. Include collegamenti, un segnaposto del logo e un sottile effetto Skeuomorphic ottenuto con ombre e sfumature. Supporta le modalità chiara e scura.

Aperto Anteprima

                <footer class="bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 text-gray-800 dark:text-gray-200 py-12">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap justify-between items-center">
      <div class="w-full md:w-1/4 mb-6 md:mb-0">
        <!-- Logo Placeholder with Skeuomorphic effect -->
        <div class="w-24 h-24 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-lg shadow-xl dark:shadow-xl-dark flex items-center justify-center">
          <svg class="w-12 h-12 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21v-2a4 4 0 00-4-4H9a4 4 0 00-4 4v2m16 0h-3.586a1 1 0 01-.707-.293l-.031-.032A1.5 1.5 0 0015 18a1.5 1.5 0 00-2.121-1.06l-.032-.032A1 1 0 0112.586 17H9.414a1 1 0 01-.707.293l-.031.032A1.5 1.5 0 006 18a1.5 1.5 0 00-2.121-1.06l-.032-.032A1 1 0 013.586 19H1"></path></svg>
        </div>
      </div>
      <div class="w-full md:w-1/4 mb-6 md:mb-0">
        <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
        <ul class="space-y-2">
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Home</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">About Us</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Services</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Contact</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/4 mb-6 md:mb-0">
        <h4 class="text-lg font-semibold mb-4">Resources</h4>
        <ul class="space-y-2">
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Blog</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Support</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Privacy Policy</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Terms of Service</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/4">
        <h4 class="text-lg font-semibold mb-4">Contact Us</h4>
        <p class="mb-2">123 Business Lane, Corporate City</p>
        <p class="mb-2">Email: [email protected]</p>
        <p>Phone: (123) 456-7890</p>
      </div>
    </div>
    <hr class="my-8 border-gray-400 dark:border-gray-600">
    <div class="text-center text-sm">
      &copy; 2023 Your Business. All rights reserved.
    </div>
  </div>
</footer>

LoginSignupComponent

Un componente di accesso/registrazione reattivo progettato con lo stile del neumorfismo e la combinazione di colori pastello per le interfacce dei social media.

Aperto Anteprima

                <div class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-800 p-6">
  <div class="bg-white dark:bg-gray-900 rounded-3xl shadow-lg p-8 max-w-md w-full">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200 mb-6">Join Us</h2>
    <form>
      <div class="mb-4">
        <input type="text" placeholder="Username" class="w-full p-4 text-gray-700 dark:text-gray-300 rounded-md border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 shadow-inner" />
      </div>
      <div class="mb-6">
        <input type="email" placeholder="Email Address" class="w-full p-4 text-gray-700 dark:text-gray-300 rounded-md border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 shadow-inner" />
      </div>
      <div class="mb-6">
        <input type="password" placeholder="Password" class="w-full p-4 text-gray-700 dark:text-gray-300 rounded-md border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 shadow-inner" />
      </div>
      <button type="submit" class="w-full bg-blue-500 text-white rounded-md p-4 hover:bg-blue-600 shadow-xl transition duration-200">Sign Up</button>
    </form>
    <div class="text-center mt-4">
      <span class="text-gray-600 dark:text-gray-400">or</span>
    </div>
    <button class="w-full mt-4 bg-gray-200 rounded-md p-4 flex items-center justify-around hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 shadow-md transition duration-200">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Google" class="w-6 h-6 rounded-full">
      <span class="text-gray-800 dark:text-gray-200">Continue with Google</span>
    </button>
    <div class="text-center mt-4">
      <p class="text-gray-600 dark:text-gray-400">Already have an account? <a href="#" class="text-blue-500 hover:underline">Log In</a></p>
    </div>
  </div>
</div>

1 ... 157 158 159 160 161 ... 335