Alle Komponenten

Alle verfügbaren Tailwind CSS-Komponenten durchsuchen

Komponente der Navigationsleiste

Eine reaktionsschnelle Navigationsleiste mit ansprechenden Mikrointeraktionen, die für den E-Commerce entwickelt wurde, mit einem dunklen Thema und Erdtönen.

Offen Vorschau

                <nav class="bg-brown-800 text-white dark:bg-brown-900 shadow-lg">
    <div class="container mx-auto flex justify-between items-center p-4">
        <a href="#" class="text-2xl font-bold hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Shop</a>
        <div class="hidden md:flex space-x-8">
            <a href="#" class="text-sm hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Home</a>
            <a href="#" class="text-sm hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Products</a>
            <a href="#" class="text-sm hover:text-brown-500 dark:hover:text-brown-300 transition-colors">About Us</a>
            <a href="#" class="text-sm hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Contact</a>
        </div>
        <div class="flex items-center space-x-4">
            <a href="#" class="text-sm hover:text-brown-500 dark:hover:text-brown-300 transition-colors">
                <img src="https://picsum.photos/40" alt="User Avatar" class="rounded-full">
            </a>
            <a href="#" class="text-sm hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Cart</a>
        </div>
        <button class="md:hidden text-brown-200 hover:text-brown-500 dark:hover:text-brown-300 transition-colors 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>
</nav>

<!-- Responsive adjustments for mobile -->
<div class="md:hidden">
    <ul class="bg-brown-800 text-white dark:bg-brown-900 p-4 space-y-2">
        <li><a href="#" class="block hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Home</a></li>
        <li><a href="#" class="block hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Products</a></li>
        <li><a href="#" class="block hover:text-brown-500 dark:hover:text-brown-300 transition-colors">About Us</a></li>
        <li><a href="#" class="block hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Contact</a></li>
    </ul>
</div>

Social-Login-Komponente

Eine reaktionsschnelle Social-Login-Komponente, die für den Dunkelmodus mit einem monochromatischen Farbschema entwickelt wurde. Geeignet für den Konsum von Blogs und Inhalten mit interaktiven Funktionen.

Offen Vorschau

                <div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-md mx-auto mt-10">
    <h2 class="text-2xl font-bold mb-4 text-center">Log in with Social Media</h2>
    <div class="flex flex-col space-y-4">
        <a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Log in with Facebook</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Log in with Google</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Log in with Twitter</span>
        </a>
    </div>
    <p class="mt-4 text-center text-gray-400">Or, <a href="#" class="text-gray-300 hover:underline">create a new account</a></p>
</div>

Minimalistisches E-Commerce-Anmeldeformular

Ein minimalistisches und flaches Design-Anmeldeformular mit Pastellfarben, das für E-Commerce-Websites entwickelt wurde. Es ist einfach, reaktionsschnell und unterstützt den Dunkelmodus mit Tailwind CSS.

Offen Vorschau

                <div
      class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900"
    >
      <div
        class="max-w-md w-full p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md"
      >
        <h2
          class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6"
        >
          Login
        </h2>
        <form>
          <div class="mb-4">
            <label
              for="email"
              class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
            >
              Email Address
            </label>
            <input
              type="email"
              id="email"
              name="email"
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
              placeholder="Enter your email"
            />
          </div>
          <div class="mb-6">
            <label
              for="password"
              class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
            >
              Password
            </label>
            <input
              type="password"
              id="password"
              name="password"
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
              placeholder="Enter your password"
            />
          </div>
          <button
            type="submit"
            class="w-full bg-pastel-blue text-black py-2 px-4 rounded-md hover:bg-pastel-darker-blue focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-200"
          >
            Login
          </button>
        </form>
        <div class="mt-6 text-center">
          <p class="text-sm text-gray-600 dark:text-gray-300">
            Don't have an account? <a href="#" class="text-pastel-blue hover:underline">Sign Up</a>
          </p>
        </div>
      </div>
    </div>

Komponente "Produktgalerie"

Responsive Produktgalerie-Komponente mit Dunkelmodus

Offen Vorschau

                <div class="bg-gray-900 py-10">
  <div class="container mx-auto px-4">
    <h2 class="text-pastel-light mb-8 text-3xl font-bold text-center">Product Gallery</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
        <img src="https://picsum.photos/seed/product1/400/300" alt="Product 1" class="rounded-md mb-4 w-full">
        <h3 class="text-pastel-lighter text-xl font-semibold mb-2">Product Title 1</h3>
        <p class="text-pastel-light text-sm mb-4">A brief description of Product 1.</p>
        <button class="bg-pastel-accent text-gray-900 py-2 px-4 rounded-md hover:bg-pastel-darker transition duration-300">View Details</button>
      </div>
      <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
        <img src="https://picsum.photos/seed/product2/400/300" alt="Product 2" class="rounded-md mb-4 w-full">
        <h3 class="text-pastel-lighter text-xl font-semibold mb-2">Product Title 2</h3>
        <p class="text-pastel-light text-sm mb-4">A brief description of Product 2.</p>
        <button class="bg-pastel-accent text-gray-900 py-2 px-4 rounded-md hover:bg-pastel-darker transition duration-300">View Details</button>
      </div>
      <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
        <img src="https://picsum.photos/seed/product3/400/300" alt="Product 3" class="rounded-md mb-4 w-full">
        <h3 class="text-pastel-lighter text-xl font-semibold mb-2">Product Title 3</h3>
        <p class="text-pastel-light text-sm mb-4">A brief description of Product 3.</p>
        <button class="bg-pastel-accent text-gray-900 py-2 px-4 rounded-md hover:bg-pastel-darker transition duration-300">View Details</button>
      </div>
    </div>
  </div>
</div>

Minimalistisches CAPTCHA

Eine reaktionsschnelle CAPTCHA-Komponente mit Unterstützung für den Dunkelmodus mit einem minimalistischen Design in Pastellfarben. Enthält ein einfaches Kontrollkästchen und einen Platzhalter für Text.

Offen Vorschau

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
        <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">CAPTCHA Verification</h2>
        <div class="flex items-center">
            <input type="checkbox" id="robot-checkbox" class="form-checkbox h-5 w-5 text-blue-600">
            <label for="robot-checkbox" class="ml-2 text-gray-700 dark:text-gray-300">I am not a robot</label>
        </div>
         <div class="mt-4 p-3 bg-gray-200 dark:bg-gray-700 rounded">
            <p class="text-sm text-gray-600 dark:text-gray-400">CAPTCHA will appear here</p>
        </div>
    </div>
</div>

Skeuomorphe Modalkomponente

Eine komplexe, reaktionsschnelle Modalkomponente in einem skeuomorphen Design mit Komplementärfarben für den E-Commerce.

Offen Vorschau

                <div class="fixed inset-0 flex items-center justify-center z-50 bg-opacity-50 bg-gray-900 dark:bg-gray-800">
  <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6 w-11/12 md:w-1/3">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Item Details</h2>
    <div class="flex justify-center my-4">
      <img src="https://picsum.photos/200/300" alt="Product Image" class="rounded-lg shadow-md" />
    </div>
    <p class="text-gray-600 dark:text-gray-300">This is where you can detail the product features, specifications, and other necessary information to help customers make an informed decision.</p>
    <ul class="my-4 text-gray-700 dark:text-gray-200">
      <li class="my-2 flex items-center"><svg class="w-5 h-5 text-blue-500 mr-2" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4zm0 2c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8z"/></svg>Specification 1</li>
      <li class="my-2 flex items-center"><svg class="w-5 h-5 text-blue-500 mr-2" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4zm0 2c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8z"/></svg>Specification 2</li>
      <li class="my-2 flex items-center"><svg class="w-5 h-5 text-blue-500 mr-2" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4zm0 2c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8z"/></svg>Specification 3</li>
    </ul>
    <div class="flex items-center justify-between my-4">
      <span class="text-lg font-bold text-gray-800 dark:text-gray-100">$19.99</span>
      <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
    </div>
    <div class="flex justify-center my-4">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full border-2 border-white dark:border-gray-800" />
      <span class="text-gray-700 dark:text-gray-200 ml-2">John Doe</span>
    </div>
    <button class="mt-4 w-full bg-red-500 hover:bg-red-600 text-white font-bold py-2 rounded">Close</button>
  </div>
</div>

Brutalistische Dashboard-Kartenkomponente

Eine Dashboard-Kartenkomponente im brutalistischen Stil mit lebendigen Farben, hohem Kontrast, komplexen interaktiven Elementen, responsivem Design und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.

Offen Vorschau

                <div class="bg-yellow-300 dark:bg-purple-900 text-gray-900 dark:text-gray-100 min-h-screen p-8 font-mono">
  <div class="container mx-auto">
    <h1 class="text-4xl font-bold mb-8 border-b-4 border-red-500 pb-2">Dashboard Overview</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- Map Section -->
      <div class="bg-white dark:bg-gray-800 p-6 border-4 border-black dark:border-lime-400 shadow-xl">
        <h2 class="text-2xl font-bold mb-4 border-b-2 border-blue-500 pb-2">Geographical Data</h2>
        <div class="h-64 bg-gray-400 dark:bg-gray-700 border-2 border-black dark:border-lime-400 flex items-center justify-center text-gray-700 dark:text-gray-400">
          [Interactive Map Placeholder]
        </div>
        <div class="mt-4 grid grid-cols-2 gap-4">
          <div class="bg-gray-200 dark:bg-gray-600 p-4 border-2 border-black dark:border-lime-400">
            <h3 class="font-bold mb-2">Metric A</h3>
            <p class="text-xl text-green-600 dark:text-green-400">1,245</p>
          </div>
          <div class="bg-gray-200 dark:bg-gray-600 p-4 border-2 border-black dark:border-lime-400">
            <h3 class="font-bold mb-2">Metric B</h3>
            <p class="text-xl text-red-600 dark:text-red-400">489</p>
          </div>
        </div>
      </div>

      <!-- Data Visualization Section -->
      <div class="bg-white dark:bg-gray-800 p-6 border-4 border-black dark:border-lime-400 shadow-xl">
        <h2 class="text-2xl font-bold mb-4 border-b-2 border-purple-500 pb-2">Key Metrics</h2>
        <div class="space-y-4">
          <div class="bg-gray-200 dark:bg-gray-600 p-4 border-2 border-black dark:border-lime-400">
            <h3 class="font-bold mb-2">Sales Performance</h3>
            <div class="h-24 bg-gray-400 dark:bg-gray-700 border-2 border-black dark:border-lime-400 flex items-center justify-center text-gray-700 dark:text-gray-400">[Chart Placeholder]</div>
          </div>
          <div class="bg-gray-200 dark:bg-gray-600 p-4 border-2 border-black dark:border-lime-400">
            <h3 class="font-bold mb-2">User Engagement</h3>
            <div class="h-24 bg-gray-400 dark:bg-gray-700 border-2 border-black dark:border-lime-400 flex items-center justify-center text-gray-700 dark:text-gray-400">[Chart Placeholder]</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Table Section -->
    <div class="mt-8 bg-white dark:bg-gray-800 p-6 border-4 border-black dark:border-lime-400 shadow-xl">
      <h2 class="text-2xl font-bold mb-4 border-b-2 border-orange-500 pb-2">Recent Activity</h2>
      <table class="min-w-full border-collapse border border-black dark:border-lime-400">
        <thead>
          <tr>
            <th class="border border-black dark:border-lime-400 p-2 text-left">User</th>
            <th class="border border-black dark:border-lime-400 p-2 text-left">Action</th>
            <th class="border border-black dark:border-lime-400 p-2 text-left">Timestamp</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="border border-black dark:border-lime-400 p-2 flex items-center">
              <img src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2 border-2 border-black dark:border-lime-400">
              <span>John Doe</span>
            </td>
            <td class="border border-black dark:border-lime-400 p-2">Viewed Report</td>
            <td class="border border-black dark:border-lime-400 p-2">2023-10-27 10:30</td>
          </tr>
          <tr>
            <td class="border border-black dark:border-lime-400 p-2 flex items-center">
               <img src="https://randomuser.me/api/portraits/women/22.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2 border-2 border-black dark:border-lime-400">
              <span>Jane Smith</span>
            </td>
            <td class="border border-black dark:border-lime-400 p-2">Updated Dashboard</td>
            <td class="border border-black dark:border-lime-400 p-2">2023-10-27 10:45</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

E-Commerce-Dashboard-Komponente

E-Commerce-Dashboard-Komponente mit Skeuomorphismus, lebendigen Farben und einfachem Layout für Tailwind CSS, mit responsiver und dunkler Theme-Unterstützung.

Offen Vorschau

                <div class="p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-xl max-w-sm mx-auto">
  <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Dashboard Overview</h2>
  <div class="flex items-center justify-between mb-4">
    <div class="flex items-center">
      <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center mr-3">
        <svg class="w-6 h-6 text-white" 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      </div>
      <div>
        <p class="text-gray-600 dark:text-gray-300 text-sm">Total Sales</p>
        <p class="text-lg font-semibold text-green-600 dark:text-green-400">$5,200</p>
      </div>
    </div>
    <svg class="w-6 h-6 text-gray-400 dark:text-gray-600" 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="M9 5l7 7-7 7"></path></svg>
  </div>
  <div class="flex items-center justify-between mb-4">
    <div class="flex items-center">
      <div class="w-10 h-10 bg-red-500 rounded-full flex items-center justify-center mr-3">
        <svg class="w-6 h-6 text-white" 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="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-8m8 0l-5 2v-2m5 0z"></path></svg>
      </div>
      <div>
        <p class="text-gray-600 dark:text-gray-300 text-sm">New orders</p>
        <p class="text-lg font-semibold text-orange-600 dark:text-orange-400">150</p>
      </div>
    </div>
    <svg class="w-6 h-6 text-gray-400 dark:text-gray-600" 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="M9 5l7 7-7 7"></path></svg>
  </div>
  <div class="flex items-center justify-between">
    <div class="flex items-center">
      <div class="w-10 h-10 bg-yellow-500 rounded-full flex items-center justify-center mr-3">
        <svg class="w-6 h-6 text-white" 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="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h.01M17 9l2 2m0 0l2-2m-2 2v-2v2z"></path></svg>
      </div>
      <div>
        <p class="text-gray-600 dark:text-gray-300 text-sm">Pending Issues</p>
        <p class="text-lg font-semibold text-red-600 dark:text-red-400">12</p>
      </div>
    </div>
    <svg class="w-6 h-6 text-gray-400 dark:text-gray-600" 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="M9 5l7 7-7 7"></path></svg>
  </div>
</div>

Retro Armaturenbrett Akkordeon

Retro / Vintage Akkordeonkomponente für Armaturenbrett mit komplementärem Farbschema und komplexer Komplexität. Enthält Responsive Design und Unterstützung für dunkle Themen mit Tailwind CSS. Kein JavaScript. Bilder über picsum.photos und Avatare über randomuser.me.

Offen Vorschau

                <div class="max-w-md mx-auto rounded-none overflow-hidden shadow-lg bg-gray-100 dark:bg-gray-800 border-4 border-purple-500 dark:border-yellow-500">
  <div class="border-b border-purple-400 dark:border-yellow-400">
    <button class="w-full px-6 py-4 text-left text-lg font-bold text-purple-700 dark:text-yellow-300 bg-purple-200 dark:bg-yellow-700 hover:bg-purple-300 dark:hover:bg-yellow-600 transition duration-300">
      Dashboard Section 1
    </button>
    <div class="px-6 py-4 text-gray-700 dark:text-gray-300">
      <p>Content for dashboard section 1. This section provides an overview of key metrics with interactive charts and graphs.</p>
      <div class="mt-4 grid grid-cols-2 gap-4">
        <div>
          <img src="https://picsum.photos/150/100" alt="Random Image" class="rounded border-2 border-purple-500 dark:border-yellow-500">
        </div>
        <div>
          <h4 class="text-md font-semibold text-purple-600 dark:text-yellow-400">Metric A</h4>
          <p class="text-sm">Value: 1200</p>
          <h4 class="text-md font-semibold text-purple-600 dark:text-yellow-400 mt-2">Metric B</h4>
          <p class="text-sm">Value: 75%</p>
        </div>
      </div>
    </div>
  </div>
  <div class="border-b border-purple-400 dark:border-yellow-400">
    <button class="w-full px-6 py-4 text-left text-lg font-bold text-purple-700 dark:text-yellow-300 bg-purple-200 dark:bg-yellow-700 hover:bg-purple-300 dark:hover:bg-yellow-600 transition duration-300">
      Dashboard Section 2
    </button>
    <div class="px-6 py-4 text-gray-700 dark:text-gray-300">
      <p>Content for dashboard section 2. Detailed reports and customizable views.</p>
        <div class="mt-4 flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-purple-500 dark:border-yellow-500">
            <div>
                <p class="font-semibold text-purple-600 dark:text-yellow-400">User Name</p>
                <p class="text-sm">Last activity: 2 hours ago</p>
            </div>
        </div>
    </div>
  </div>
    <div>
    <button class="w-full px-6 py-4 text-left text-lg font-bold text-purple-700 dark:text-yellow-300 bg-purple-200 dark:bg-yellow-700 hover:bg-purple-300 dark:hover:bg-yellow-600 transition duration-300">
      Dashboard Section 3
    </button>
    <div class="px-6 py-4 text-gray-700 dark:text-gray-300">
      <p>Content for dashboard section 3. Settings and configuration options.</p>
        <ul class="list-disc list-inside mt-2">
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
        </ul>
    </div>
  </div>
</div>

Galerie-Komponente

Eine responsive Galeriekomponente mit Tailwind CSS mit Skeuomorphismus-Design, Pastell-Farbschema und mäßiger Komplexität für Social-Media-Zwecke. Enthält Unterstützung für den Dunkelmodus und verwendet picsum.photos für Bilder und randomuser.me für Avatare.

Offen Vorschau

                <div class="container mx-auto px-4 py-8 dark:bg-gray-800">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <div class="bg-white rounded-lg shadow-xl overflow-hidden dark:bg-gray-700">
      <img src="https://picsum.photos/seed/1/400/300" alt="Gallery Image 1" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-xl font-semibold mb-2 dark:text-white">Image Title 1</h3>
        <p class="text-gray-600 dark:text-gray-300">A brief description of the image goes here.</p>
        <div class="flex items-center mt-4">
          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar of user 1">
          <div class="text-sm">
            <p class="text-gray-900 leading-none dark:text-white">User Name 1</p>
            <p class="text-gray-600 dark:text-gray-400">Posted on January 1, 2024</p>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-white rounded-lg shadow-xl overflow-hidden dark:bg-gray-700">
      <img src="https://picsum.photos/seed/2/400/300" alt="Gallery Image 2" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-xl font-semibold mb-2 dark:text-white">Image Title 2</h3>
        <p class="text-gray-600 dark:text-gray-300">A brief description of the image goes here.</p>
        <div class="flex items-center mt-4">
          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar of user 2">
          <div class="text-sm">
            <p class="text-gray-900 leading-none dark:text-white">User Name 2</p>
            <p class="text-gray-600 dark:text-gray-400">Posted on January 1, 2024</p>
          </div>
        </div>
      </div>
    </div>
     <div class="bg-white rounded-lg shadow-xl overflow-hidden dark:bg-gray-700">
      <img src="https://picsum.photos/seed/3/400/300" alt="Gallery Image 3" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-xl font-semibold mb-2 dark:text-white">Image Title 3</h3>
        <p class="text-gray-600 dark:text-gray-300">A brief description of the image goes here.</p>
        <div class="flex items-center mt-4">
          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar of user 3">
          <div class="text-sm">
            <p class="text-gray-900 leading-none dark:text-white">User Name 3</p>
            <p class="text-gray-600 dark:text-gray-400">Posted on January 1, 2024</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

1 ... 102 103 104 105 106 ... 262

Kategorien

Alle Komponenten