Alle Komponenten

Alle verfügbaren Tailwind CSS-Komponenten durchsuchen

Komponente der Fortschrittsleiste

Eine reaktionsschnelle Fortschrittsleisten-Komponente, die für den Dunkelmodus mit Tailwind CSS entwickelt wurde und für moderne Webanwendungen geeignet ist.

Offen Vorschau

                <div class="flex items-center justify-center h-screen bg-gray-900 p-4">
    <div class="w-full max-w-md">
        <h2 class="text-white text-lg font-semibold mb-2">Upload Progress</h2>
        <div class="relative bg-gray-700 rounded-full h-4">
            <div class="bg-green-500 rounded-full h-full" style="width: 60%;"></div>
        </div>
        <div class="flex justify-between text-xs text-gray-400 mt-1">
            <span>0%</span>
            <span>60%</span>
            <span>100%</span>
        </div>
    </div>
</div>

Komponente "Erfolgsmeldungen"

Success Messages Component mit Neumorphism-Design, Responsive- und Dark-Theme-Unterstützung

Offen Vorschau

                <div class="flex items-center justify-center h-screen dark:bg-gray-900">
  <div class="bg-gray-200 p-6 rounded-xl shadow-xl s Neumorphism dark:bg-gray-800">
    <div class="text-green-500 text-2xl mb-4">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    </div>
    <h3 class="text-xl font-semibold mb-2 dark:text-white">Success!</h3>
    <p class="text-gray-600 dark:text-gray-300">Your action was performed successfully.</p>
  </div>
</div>

Login/Signup-Komponente

Eine reaktionsschnelle Login-/Signup-Komponente, die für den Dunkelmodus mit Tailwind CSS entwickelt wurde.

Offen Vorschau

                <div class="min-h-screen flex items-center justify-center bg-gray-900 p-6">
    <div class="bg-gray-800 rounded-lg shadow-lg p-8 max-w-sm w-full">
        <h2 class="text-2xl text-white text-center mb-6">Welcome</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-300 mb-2" for="email">Email</label>
                <input class="w-full p-3 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-blue-500" type="email" id="email" placeholder="Enter your email" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-300 mb-2" for="password">Password</label>
                <input class="w-full p-3 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-blue-500" type="password" id="password" placeholder="Enter your password" required>
            </div>
            <button class="w-full bg-blue-600 text-white p-3 rounded hover:bg-blue-500 transition duration-300" type="submit">Login</button>
        </form>
        <div class="text-center text-gray-400 mt-4">
            <p>Don't have an account? <a href="#" class="text-blue-400">Sign up</a></p>
        </div>
    </div>
    <div class="bg-gray-800 rounded-lg shadow-lg p-8 max-w-sm w-full mt-8">
        <h2 class="text-2xl text-white text-center mb-6">Sign Up</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-300 mb-2" for="name">Name</label>
                <input class="w-full p-3 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-blue-500" type="text" id="name" placeholder="Enter your name" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-300 mb-2" for="email-signup">Email</label>
                <input class="w-full p-3 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-blue-500" type="email" id="email-signup" placeholder="Enter your email" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-300 mb-2" for="password-signup">Password</label>
                <input class="w-full p-3 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-blue-500" type="password" id="password-signup" placeholder="Create a password" required>
            </div>
            <button class="w-full bg-blue-600 text-white p-3 rounded hover:bg-blue-500 transition duration-300" type="submit">Sign Up</button>
        </form>
    </div>
</div>

Eine Reihe von "Gefällt mir"- und Reaktionsschaltflächen mit einem Skeuomorphen Designstil, der responsive Layouts und den Dunkelmodus unterstützt. Die Buttons sind rein mit HTML und Tailwind CSS umgesetzt, ohne JavaScript. Der Dunkelmodus wird über CSS-Klassen behandelt. Platzhalterbilder werden für Avatare verwendet.

Offen Vorschau

                 <style>
      .skeuomorphic {
        background-color: #e0e0e0;
        box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
        border-radius: 10px;
        padding: 10px;
      }

      .skeuomorphic:active {
        box-shadow: inset 7px 7px 15px #bebebe, inset -7px -7px 15px #ffffff;
      }

      .dark .skeuomorphic {
        background-color: #333;
        box-shadow: 7px 7px 15px #222, -7px -7px 15px #444;
      }

      .dark .skeuomorphic:active {
        box-shadow: inset 7px 7px 15px #222, inset -7px -7px 15px #444;
      }
    </style>
    <div class="flex justify-center items-center space-x-4 p-6 bg-gray-100 dark:bg-black">
      <div class="flex space-x-4 skeuomorphic dark:skeuomorphic">
        <button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6 text-gray-500 dark:text-gray-300"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21c-.64-.149-1.28-.293-1.92-.434L13 18H4a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v4zm-2 0h2"
            ></path>
          </svg>
          <span class="text-gray-700 dark:text-gray-300">Like</span>
        </button>

        <button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6 text-gray-500 dark:text-gray-300"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <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>
          <span class="text-gray-700 dark:text-gray-300">Love</span>
        </button>

        <button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6 text-gray-500 dark:text-gray-300"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M14.828 14.828a4 4 0 01-5.656 0M9 21v-6a2 2 0 012-2h2a2 2 0 012 2v6m-6 0h6"
            ></path>
          </svg>
          <span class="text-gray-700 dark:text-gray-300">Haha</span>
        </button>

        <button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6 text-gray-500 dark:text-gray-300"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
            ></path>
          </svg>
          <span class="text-gray-700 dark:text-gray-300">Wow</span>
        </button>

        <button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6 text-gray-500 dark:text-gray-300"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
            ></path>
          </svg>
          <span class="text-gray-700 dark:text-gray-300">Sad</span>
        </button>

        <button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6 text-gray-500 dark:text-gray-300"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
            ></path>
          </svg>
          <span class="text-gray-700 dark:text-gray-300">Angry</span>
        </button>
      </div>
    </div>

Komponente "Social-Share-Buttons"

Eine reaktionsschnelle Komponente für Social-Share-Buttons, die mit Glasmorphismus-Effekten gestaltet ist und sowohl helle als auch dunkle Themen unterstützt.

Offen Vorschau

                <div class="flex justify-center items-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg backdrop-blur-lg bg-opacity-30 border border-gray-300 dark:border-gray-600">
    <a href="https://facebook.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/40/40?random=1" alt="Facebook" class="rounded-full">
    </a>
    <a href="https://twitter.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/40/40?random=2" alt="Twitter" class="rounded-full">
    </a>
    <a href="https://linkedin.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/40/40?random=3" alt="LinkedIn" class="rounded-full">
    </a>
    <a href="https://instagram.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/40/40?random=4" alt="Instagram" class="rounded-full">
    </a>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1F2937;
        }
    }
</style>

Komponente des Bewertungssystems

Bewertungssystemkomponente mit Neumorphism-Stil, responsiven Effekten und Unterstützung für dunkle Themen.

Offen Vorschau

                <div class='flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4'><div class='w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-neumorphism dark:shadow-neumorphism-dark p-6 space-y-6'><h2 class='text-2xl font-bold text-center text-gray-800 dark:text-white'>Rate our service</h2><div class='flex items-center justify-center space-x-4'><button class='text-gray-500 dark:text-gray-400 hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200'><svg class='w-8 h-8 fill-current' viewBox='0 0 24 24'><path d='M12 .288l3.674 7.556 8.326 1.153-6.001 5.835 1.416 8.284L12 18.288l-7.415 3.238 1.416-8.284-6.001-5.835 8.326-1.153z'/></svg></button><button class='text-gray-500 dark:text-gray-400 hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200'><svg class='w-8 h-8 fill-current' viewBox='0 0 24 24'><path d='M12 .288l3.674 7.556 8.326 1.153-6.001 5.835 1.416 8.284L12 18.288l-7.415 3.238 1.416-8.284-6.001-5.835 8.326-1.153z'/></svg></button><button class='text-gray-500 dark:text-gray-400 hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200'><svg class='w-8 h-8 fill-current' viewBox='0 0 24 24'><path d='M12 .288l3.674 7.556 8.326 1.153-6.001 5.835 1.416 8.284L12 18.288l-7.415 3.238 1.416-8.284-6.001-5.835 8.326-1.153z'/></svg></button><button class='text-gray-500 dark:text-gray-400 hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200'><svg class='w-8 h-8 fill-current' viewBox='0 0 24 24'><path d='M12 .288l3.674 7.556 8.326 1.153-6.001 5.835 1.416 8.284L12 18.288l-7.415 3.238 1.416-8.284-6.001-5.835 8.326-1.153z'/></svg></button><button class='text-gray-500 dark:text-gray-400 hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200'><svg class='w-8 h-8 fill-current' viewBox='0 0 24 24'><path d='M12 .288l3.674 7.556 8.326 1.153-6.001 5.835 1.416 8.284L12 18.288l-7.415 3.238 1.416-8.284-6.001-5.835 8.326-1.153z'/></svg></button></div></div></div><style>.shadow-neumorphism { box-shadow: 7px 7px 15px #c7c7c7, -7px -7px 15px #ffffff; }.dark .shadow-neumorphism-dark { box-shadow: 7px 7px 15px #333, -7px -7px 15px #555; }</style>

Breadcrumb-Navigationskomponente

Breadcrumb-Navigationskomponente mit Skeuomorphismus-Design, responsiven Effekten und Unterstützung für dunkle Themen.

Offen Vorschau

                <nav aria-label="Breadcrumb" class="flex">
  <ol role="list" class="flex items-center space-x-4">
    <li>
      <div>
        <a href="#" class="text-gray-400 hover:text-gray-500">
          <svg class="h-5 w-5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-1-1l7-7z" clip-rule="evenodd" />
          </svg>
          <span class="sr-only">Home</span>
        </a>
      </div>
    </li>
    
    <li>
      <div class="flex items-center">
        <svg class="h-5 w-5 flex-shrink-0 text-gray-300" fill="currentColor" viewBox="0 0 24 44" preserveAspectRatio="none" aria-hidden="true">
          <path d="M.293 0H.026L9.32 18.316c-.387-.85-.695-1.774-.95-2.738L0 0z" />
        </svg>
        <a href="#" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700">Projects</a>
      </div>
    </li>
    
    <li>
      <div class="flex items-center">
        <svg class="h-5 w-5 flex-shrink-0 text-gray-300" fill="currentColor" viewBox="0 0 24 44" preserveAspectRatio="none" aria-hidden="true">
          <path d="M.293 0H.026L9.32 18.316c-.387-.85-.695-1.774-.95-2.738L0 0z" />
        </svg>
        <a href="#" aria-current="page" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700">Project Nero</a>
      </div>
    </li>
  </ol>
</nav>

Komponenten für die Datenvisualisierung

Eine reaktionsschnelle Datenvisualisierungskomponente, die mit Material Design-Prinzipien wie rasterbasierten Layouts und Tiefeneffekten entwickelt wurde, mit Unterstützung für dunkle Themen.

Offen Vorschau

                <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md transition-all ease-in-out duration-300">
    <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Data Visualization</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-6 shadow hover:shadow-lg transition-shadow duration-300">
            <h3 class="font-medium text-gray-800 dark:text-gray-200">Chart 1</h3>
            <img src="https://picsum.photos/200/150" alt="Placeholder Image" class="rounded-lg mt-2" />
            <p class="text-gray-600 dark:text-gray-300 mt-2">Description of chart 1 goes here.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-6 shadow hover:shadow-lg transition-shadow duration-300">
            <h3 class="font-medium text-gray-800 dark:text-gray-200">Chart 2</h3>
            <img src="https://picsum.photos/200/151" alt="Placeholder Image" class="rounded-lg mt-2" />
            <p class="text-gray-600 dark:text-gray-300 mt-2">Description of chart 2 goes here.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-6 shadow hover:shadow-lg transition-shadow duration-300">
            <h3 class="font-medium text-gray-800 dark:text-gray-200">Chart 3</h3>
            <img src="https://picsum.photos/200/152" alt="Placeholder Image" class="rounded-lg mt-2" />
            <p class="text-gray-600 dark:text-gray-300 mt-2">Description of chart 3 goes here.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-6 shadow hover:shadow-lg transition-shadow duration-300">
            <h3 class="font-medium text-gray-800 dark:text-gray-200">Chart 4</h3>
            <img src="https://picsum.photos/200/153" alt="Placeholder Image" class="rounded-lg mt-2" />
            <p class="text-gray-600 dark:text-gray-300 mt-2">Description of chart 4 goes here.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-6 shadow hover:shadow-lg transition-shadow duration-300">
            <h3 class="font-medium text-gray-800 dark:text-gray-200">Chart 5</h3>
            <img src="https://picsum.photos/200/154" alt="Placeholder Image" class="rounded-lg mt-2" />
            <p class="text-gray-600 dark:text-gray-300 mt-2">Description of chart 5 goes here.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-6 shadow hover:shadow-lg transition-shadow duration-300">
            <h3 class="font-medium text-gray-800 dark:text-gray-200">Chart 6</h3>
            <img src="https://picsum.photos/200/155" alt="Placeholder Image" class="rounded-lg mt-2" />
            <p class="text-gray-600 dark:text-gray-300 mt-2">Description of chart 6 goes here.</p>
        </div>
    </div>
    <div class="mt-4 text-center">
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-all duration-200">Load More</button>
    </div>
</div>

Hamburger-Menü-Komponente

Eine reaktionsschnelle Hamburger-Menükomponente mit brutalistischem Design mit hohem Kontrast, auffälligen Stilen und Unterstützung für den Dunkelmodus.

Offen Vorschau

                <div class="relative bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
    <button class="flex items-center justify-center w-10 h-10 text-black dark:text-white hover:bg-gray-300 dark:hover:bg-gray-700 rounded-md transition-all">
        <svg class="w-8 h-8" 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="M4 6h16M4 12h16m-7 6h7"/>
        </svg>
    </button>
    <div class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg opacity-0 transition-opacity duration-300 ease-in-out transform scale-0 origin-top-right">
        <div class="flex flex-col p-4 rounded-lg">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-10 h-10 mb-2">
            <h3 class="text-lg font-bold text-black dark:text-white">Menu Title</h3>
            <ul class="space-y-2">
                <li>
                    <a href="#" class="block px-2 py-1 text-black dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition-all">Item 1</a>
                </li>
                <li>
                    <a href="#" class="block px-2 py-1 text-black dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition-all">Item 2</a>
                </li>
                <li>
                    <a href="#" class="block px-2 py-1 text-black dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition-all">Item 3</a>
                </li>
            </ul>
        </div>
    </div>
</div>

Infografik-Komponente

Infografik-Komponente im Brutalismus-Stil, hoher Kontrast, ungewöhnliches Layout, reaktionsschnell mit Unterstützung des Dunkelmodus mit Rückenwind-CSS

Offen Vorschau

                <section class="bg-white dark:bg-stone-900 text-stone-900 dark:text-white p-8 sm:p-12 md:p-16 lg:p-20 font-mono">
  <div class="container mx-auto">
    <h2 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold mb-12 uppercase border-b-8 border-stone-900 dark:border-white pb-4">Infographic Insights</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <div class="bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white transform transition-transform duration-300 hover:scale-105">
        <h3 class="text-2xl font-bold mb-4 uppercase">Data Point 1</h3>
        <p class="text-lg mb-4">Quis at aute sint partem non, sed literis minim ea.</p>
        <div class="text-5xl font-bold text-right text-red-700 dark:text-yellow-400">123</div>
      </div>
      <div class="bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white transform transition-transform duration-300 hover:scale-105">
        <h3 class="text-2xl font-bold mb-4 uppercase">Data Point 2</h3>
        <p class="text-lg mb-4">Esse cillum fore consequat, nam magna tempor a fore quam.</p>
        <div class="text-5xl font-bold text-right text-red-700 dark:text-yellow-400">45%</div>
      </div>
      <div class="bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white transform transition-transform duration-300 hover:scale-105">
        <h3 class="text-2xl font-bold mb-4 uppercase">Data Point 3</h3>
        <p class="text-lg mb-4">Do eu lorem ne nescius, ex ut laboris constructio.</p>
        <div class="text-5xl font-bold text-right text-red-700 dark:text-yellow-400">$999</div>
      </div>
    </div>
    <div class="mt-12 grid grid-cols-1 lg:grid-cols-2 gap-8">
        <div class="bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white flex items-center transform transition-transform duration-300 hover:rotate-2">
            <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Avatar" class="w-16 h-16 rounded-none mr-6 border-4 border-stone-900 dark:border-white">
            <div>
                <h3 class="text-2xl font-bold mb-2 uppercase">Key Stat with Image</h3>
                <p class="text-lg">Non pariatur quae ne amet, admodum non expetendis.</p>
                 <div class="text-5xl font-bold text-left text-red-700 dark:text-yellow-400 mt-4">7890</div>
            </div>
        </div>
         <div class="bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white transform transition-transform duration-300 hover:-rotate-2">
            <h3 class="text-2xl font-bold mb-4 uppercase">Image Highlight</h3>
            <img src="https://picsum.photos/id/237/400/250" alt="Placeholder Image" class="w-full h-64 object-cover border-4 border-stone-900 dark:border-white mb-4">
            <p class="text-lg">Id sint singulis aut ullamco. lorem nescius aut cupidatat.</p>
        </div>
    </div>
     <div class="mt-12 bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white overflow-x-auto">
        <h3 class="text-2xl font-bold mb-4 uppercase">Scrolling Data</h3>
        <div class="flex space-x-8">
            <div class="flex-none w-64">
                <div class="text-4xl font-bold text-red-700 dark:text-yellow-400 mb-2">1024</div>
                <p class="text-lg">Specific insight one</p>
            </div>
             <div class="flex-none w-64">
                <div class="text-4xl font-bold text-red-700 dark:text-yellow-400 mb-2">2048</div>
                <p class="text-lg">Specific insight two</p>
            </div>
             <div class="flex-none w-64">
                <div class="text-4xl font-bold text-red-700 dark:text-yellow-400 mb-2">4096</div>
                <p class="text-lg">Specific insight three</p>
            </div>
             <div class="flex-none w-64">
                <div class="text-4xl font-bold text-red-700 dark:text-yellow-400 mb-2">8192</div>
                <p class="text-lg">Specific insight four</p>
            </div>
        </div>
    </div>
  </div>
</section>

1 ... 217 218 219 220 221 ... 262

Kategorien

Alle Komponenten

Komponente der Fortschrittsleiste

Komponente "Erfolgsmeldungen"

Login/Signup-Komponente

Skeuomorphe Reaktionsknöpfe

Komponente "Social-Share-Buttons"

Komponente des Bewertungssystems

Breadcrumb-Navigationskomponente

Komponenten für die Datenvisualisierung

Hamburger-Menü-Komponente

Infografik-Komponente