Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Industrial_Farming_Cards_Component

Un ensemble de cartes réactives avec une esthétique industrielle et de matières premières, des couleurs neutres chaudes et un support en mode sombre, adapté à l’agriculture et aux sites Web agricoles. Comprend des éléments apparents et un design utilitaire.

Ouvrir Aperçu

                <section class="py-12 bg-stone-100 dark:bg-stone-900 transition-colors duration-300">
  <div class="container mx-auto px-4">
    <h2 class="text-4xl font-extrabold text-center text-stone-800 dark:text-stone-200 mb-12 uppercase tracking-wide font-mono">
      Farm Operations At A Glance
    </h2>
    <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">

      <!-- Card 1: Crop Monitoring -->
      <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden border-t-4 border-l-4 border-stone-400 dark:border-stone-600 group hover:shadow-2xl hover:scale-105 transition duration-300 ease-in-out transform relative h-full flex flex-col">
        <div class="absolute -top-3 -left-3 w-8 h-8 bg-stone-400 dark:bg-stone-600 rounded-full flex items-center justify-center text-stone-900 dark:text-stone-100 text-lg font-bold font-mono">1</div>
        <img class="w-full h-48 object-cover object-center border-b-2 border-stone-300 dark:border-stone-700" src="https://picsum.photos/id/1015/400/300" alt="Farm field with crops">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="font-bold text-2xl text-stone-800 dark:text-stone-100 mb-2 font-mono uppercase tracking-wide">Crop Monitoring</h3>
          <p class="text-stone-700 dark:text-stone-300 text-base mb-4 flex-grow">
            Real-time data on soil moisture, temperature, and nutrient levels. Optimize irrigation and fertilization for maximum yield.
          </p>
          <div class="mt-4 pt-4 border-t border-stone-300 dark:border-stone-700 flex items-center justify-between text-stone-600 dark:text-stone-400">
            <span class="flex items-center text-sm">
              <svg class="w-4 h-4 mr-1 text-yellow-600 dark:text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
              Updated daily
            </span>
            <a href="#" class="text-stone-900 dark:text-stone-100 hover:text-orange-700 dark:hover:text-amber-500 font-semibold text-sm underline-offset-4 hover:underline transition-colors duration-200">
              View Analytics
            </a>
          </div>
        </div>
      </div>

      <!-- Card 2: Livestock Management -->
      <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden border-t-4 border-l-4 border-stone-400 dark:border-stone-600 group hover:shadow-2xl hover:scale-105 transition duration-300 ease-in-out transform relative h-full flex flex-col">
        <div class="absolute -top-3 -left-3 w-8 h-8 bg-stone-400 dark:bg-stone-600 rounded-full flex items-center justify-center text-stone-900 dark:text-stone-100 text-lg font-bold font-mono">2</div>
        <img class="w-full h-48 object-cover object-center border-b-2 border-stone-300 dark:border-stone-700" src="https://picsum.photos/id/1084/400/300" alt="Cows grazing in a field">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="font-bold text-2xl text-stone-800 dark:text-stone-100 mb-2 font-mono uppercase tracking-wide">Livestock Health</h3>
          <p class="text-stone-700 dark:text-stone-300 text-base mb-4 flex-grow">
            Track animal health, feeding schedules, and breeding cycles. Ensure optimal welfare and productivity.
          </p>
          <div class="mt-4 pt-4 border-t border-stone-300 dark:border-stone-700 flex items-center justify-between text-stone-600 dark:text-stone-400">
            <span class="flex items-center text-sm">
              <svg class="w-4 h-4 mr-1 text-green-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              Healthy metrics
            </span>
            <a href="#" class="text-stone-900 dark:text-stone-100 hover:text-orange-700 dark:hover:text-amber-500 font-semibold text-sm underline-offset-4 hover:underline transition-colors duration-200">
              Manage Herds
            </a>
          </div>
        </div>
      </div>

      <!-- Card 3: Equipment Maintenance -->
      <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden border-t-4 border-l-4 border-stone-400 dark:border-stone-600 group hover:shadow-2xl hover:scale-105 transition duration-300 ease-in-out transform relative h-full flex flex-col">
        <div class="absolute -top-3 -left-3 w-8 h-8 bg-stone-400 dark:bg-stone-600 rounded-full flex items-center justify-center text-stone-900 dark:text-stone-100 text-lg font-bold font-mono">3</div>
        <img class="w-full h-48 object-cover object-center border-b-2 border-stone-300 dark:border-stone-700" src="https://picsum.photos/id/106/400/300" alt="Heavy farm machinery">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="font-bold text-2xl text-stone-800 dark:text-stone-100 mb-2 font-mono uppercase tracking-wide">Machinery Hub</h3>
          <p class="text-stone-700 dark:text-stone-300 text-base mb-4 flex-grow">
            Monitor equipment usage, schedule maintenance, and track fuel consumption. Minimize downtime and costs.
          </p>
          <div class="mt-4 pt-4 border-t border-stone-300 dark:border-stone-700 flex items-center justify-between text-stone-600 dark:text-stone-400">
            <span class="flex items-center text-sm">
              <svg class="w-4 h-4 mr-1 text-red-600 dark:text-rose-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.32a1 1 0 01.743-.32h2a1 1 0 01.743.32l.995 1.194a.25.25 0 00.176.079h4.053A2.75 2.75 0 0118 7.32v7.74a2.75 2.75 0 01-2.75 2.75H4.75A2.75 2.75 0 012 15.06V7.32a2.75 2.75 0 012.75-2.75h4.053a.25.25 0 00.176-.079l.995-1.194zM12 9a1 1 0 10-2 0v2a1 1 0 102 0V9z" clip-rule="evenodd"></path></svg>
              Service required
            </span>
            <a href="#" class="text-stone-900 dark:text-stone-100 hover:text-orange-700 dark:hover:text-amber-500 font-semibold text-sm underline-offset-4 hover:underline transition-colors duration-200">
              Schedule Service
            </a>
          </div>
        </div>
      </div>

      <!-- Card 4: Farm Management -->
      <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden border-t-4 border-l-4 border-stone-400 dark:border-stone-600 group hover:shadow-2xl hover:scale-105 transition duration-300 ease-in-out transform relative h-full flex flex-col">
        <div class="absolute -top-3 -left-3 w-8 h-8 bg-stone-400 dark:bg-stone-600 rounded-full flex items-center justify-center text-stone-900 dark:text-stone-100 text-lg font-bold font-mono">4</div>
        <img class="w-full h-48 object-cover object-center border-b-2 border-stone-300 dark:border-stone-700" src="https://picsum.photos/id/194/400/300" alt="Barn and farm landscape">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="font-bold text-2xl text-stone-800 dark:text-stone-100 mb-2 font-mono uppercase tracking-wide">Supply Chain</h3>
          <p class="text-stone-700 dark:text-stone-300 text-base mb-4 flex-grow">
            Manage inventory, orders, and sales. Streamline your farm's entire production and distribution process.
          </p>
          <div class="mt-4 pt-4 border-t border-stone-300 dark:border-stone-700 flex items-center justify-between text-stone-600 dark:text-stone-400">
            <span class="flex items-center text-sm">
              <svg class="w-4 h-4 mr-1 text-blue-600 dark:text-sky-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1h2a1 1 0 110 2h-2v2a1 1 0 11-2 0V6H6a1 1 0 010-2h2V3a1 1 0 011-1z"/><path fill-rule="evenodd" d="M4 7h12a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V9a2 2 0 012-2zm0 2v6h12V9H4z" clip-rule="evenodd"></path></svg>
              New orders
            </span>
            <a href="#" class="text-stone-900 dark:text-stone-100 hover:text-orange-700 dark:hover:text-amber-500 font-semibold text-sm underline-offset-4 hover:underline transition-colors duration-200">
              View Reports
            </a>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>

Composant de galerie de produits

Un composant de galerie de produits simple et réactif avec un style de conception glassmorphism, une palette de couleurs noir et blanc avec un accent vif, adapté aux sites d’emploi ou aux plateformes de carrière. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto py-8">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-8 text-center">
      Featured Opportunities
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- Product Card 1 -->
      <div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-blur-md border border-white/20 dark:border-gray-700/50 rounded-xl shadow-lg dark:shadow-xl overflow-hidden group transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/job1/600/400" alt="Software Engineer Job">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
            Senior Software Engineer
            <span class="block text-sm font-normal text-gray-600 dark:text-gray-300">Acme Corp</span>
          </h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">
            We are looking for an experienced Software Engineer to join our growing team. You will be responsible for designing and developing high-quality software solutions.
          </p>
          <div class="flex items-center justify-between text-sm mb-4">
            <span class="px-3 py-1 bg-fuchsia-500 text-white rounded-full text-xs font-semibold">Full-time</span>
            <span class="text-gray-600 dark:text-gray-400"><i class="fas fa-map-marker-alt mr-1"></i> Remote</span>
          </div>
          <a href="#" class="block w-full text-center py-2 px-4 rounded-lg bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-medium transition duration-300 ease-in-out">
            Apply Now
          </a>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-blur-md border border-white/20 dark:border-gray-700/50 rounded-xl shadow-lg dark:shadow-xl overflow-hidden group transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/job2/600/400" alt="Marketing Manager Job">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
            Digital Marketing Manager
            <span class="block text-sm font-normal text-gray-600 dark:text-gray-300">Global Solutions Inc.</span>
          </h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">
            Join our dynamic marketing team and lead our digital strategy. We need someone passionate about driving online growth and brand awareness.
          </p>
          <div class="flex items-center justify-between text-sm mb-4">
            <span class="px-3 py-1 bg-fuchsia-500 text-white rounded-full text-xs font-semibold">Hybrid</span>
            <span class="text-gray-600 dark:text-gray-400"><i class="fas fa-map-marker-alt mr-1"></i> New York, USA</span>
          </div>
          <a href="#" class="block w-full text-center py-2 px-4 rounded-lg bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-medium transition duration-300 ease-in-out">
            Apply Now
          </a>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-blur-md border border-white/20 dark:border-gray-700/50 rounded-xl shadow-lg dark:shadow-xl overflow-hidden group transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/job3/600/400" alt="UX Designer Job">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
            UX/UI Designer
            <span class="block text-sm font-normal text-gray-600 dark:text-gray-300">Creative Minds Studio</span>
          </h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">
            Shape user experiences with us! We're seeking a talented UX/UI Designer to craft intuitive and beautiful interfaces.
          </p>
          <div class="flex items-center justify-between text-sm mb-4">
            <span class="px-3 py-1 bg-fuchsia-500 text-white rounded-full text-xs font-semibold">Full-time</span>
            <span class="text-gray-600 dark:text-gray-400"><i class="fas fa-map-marker-alt mr-1"></i> London, UK</span>
          </div>
          <a href="#" class="block w-full text-center py-2 px-4 rounded-lg bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-medium transition duration-300 ease-in-out">
            Apply Now
          </a>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-blur-md border border-white/20 dark:border-gray-700/50 rounded-xl shadow-lg dark:shadow-xl overflow-hidden group transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/job4/600/400" alt="Data Scientist Job">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
            Data Scientist
            <span class="block text-sm font-normal text-gray-600 dark:text-gray-300">Data Insights Co.</span>
          </h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">
            Unlock insights from complex data sets. We are looking for a Data Scientist to build predictive models and analyze trends.
          </p>
          <div class="flex items-center justify-between text-sm mb-4">
            <span class="px-3 py-1 bg-fuchsia-500 text-white rounded-full text-xs font-semibold">Remote</span>
            <span class="text-gray-600 dark:text-gray-400"><i class="fas fa-map-marker-alt mr-1"></i> Anywhere</span>
          </div>
          <a href="#" class="block w-full text-center py-2 px-4 rounded-lg bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-medium transition duration-300 ease-in-out">
            Apply Now
          </a>
        </div>
      </div>

      <!-- Product Card 5 -->
      <div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-blur-md border border-white/20 dark:border-gray-700/50 rounded-xl shadow-lg dark:shadow-xl overflow-hidden group transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/job5/600/400" alt="Project Manager Job">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
            Project Manager
            <span class="block text-sm font-normal text-gray-600 dark:text-gray-300">Innovate Solutions LLC</span>
          </h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">
            Oversee key projects from conception to completion. We need a meticulous Project Manager with excellent organizational skills.
          </p>
          <div class="flex items-center justify-between text-sm mb-4">
            <span class="px-3 py-1 bg-fuchsia-500 text-white rounded-full text-xs font-semibold">Full-time</span>
            <span class="text-gray-600 dark:text-gray-400"><i class="fas fa-map-marker-alt mr-1"></i> Berlin, DE</span>
          </div>
          <a href="#" class="block w-full text-center py-2 px-4 rounded-lg bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-medium transition duration-300 ease-in-out">
            Apply Now
          </a>
        </div>
      </div>

      <!-- Product Card 6 -->
      <div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-blur-md border border-white/20 dark:border-gray-700/50 rounded-xl shadow-lg dark:shadow-xl overflow-hidden group transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/job6/600/400" alt="Content Writer Job">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
            Senior Content Writer
            <span class="block text-sm font-normal text-gray-600 dark:text-gray-300">Content Hub</span>
          </h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">
            Craft compelling stories and engage audiences. We are seeking a creative Senior Content Writer to elevate our brand messaging.
          </p>
          <div class="flex items-center justify-between text-sm mb-4">
            <span class="px-3 py-1 bg-fuchsia-500 text-white rounded-full text-xs font-semibold">Part-time</span>
            <span class="text-gray-600 dark:text-gray-400"><i class="fas fa-map-marker-alt mr-1"></i> Online</span>
          </div>
          <a href="#" class="block w-full text-center py-2 px-4 rounded-lg bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-medium transition duration-300 ease-in-out">
            Apply Now
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

Composant du formulaire de connexion

Un composant de formulaire de connexion réactif avec prise en charge du mode sombre, utilisant des couleurs pastel, adapté aux sites Web d’actualités/journalisme. Il assure une réduction de la fatigue oculaire grâce à son interface utilisateur sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
  <div class="sm:mx-auto sm:w-full sm:max-w-md">
    <img class="mx-auto h-12 w-auto" src="https://picsum.photos/id/1018/100/100" alt="News Outlet Logo">
    <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-gray-100">
      Sign in to your account
    </h2>
    <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400 max-w">
      Or
      <a href="#" class="font-medium text-purple-600 hover:text-purple-500 dark:text-purple-400 dark:hover:text-purple-300">
        create a new account
      </a>
    </p>
  </div>

  <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
    <div class="bg-white dark:bg-gray-800 py-8 px-4 shadow-xl rounded-lg sm:px-10 border border-gray-200 dark:border-gray-700">
      <form class="space-y-6" action="#" method="POST">
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
            Email address
          </label>
          <div class="mt-1">
            <input id="email" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100">
          </div>
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
            Password
          </label>
          <div class="mt-1">
            <input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100">
          </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-purple-600 focus:ring-purple-500 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700 dark:checked:bg-purple-600">
            <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-purple-600 hover:text-purple-500 dark:text-purple-400 dark:hover:text-purple-300">
              Forgot your password?
            </a>
          </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-pink-500 hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-offset-gray-800">
            Sign in
          </button>
        </div>
      </form>

      <div class="mt-6">
        <div class="relative">
          <div class="absolute inset-0 flex items-center">
            <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
          </div>
          <div class="relative flex justify-center text-sm">
            <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">
              Or continue with
            </span>
          </div>
        </div>

        <div class="mt-6 grid grid-cols-2 gap-3">
          <div>
            <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
              <img class="h-5 w-5" src="https://www.svgrepo.com/show/303108/github-icon-svg-logo.svg" alt="GitHub">
              <span class="ml-2">GitHub</span>
            </a>
          </div>
          <div>
            <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
              <img class="h-5 w-5" src="https://www.svgrepo.com/show/303112/google-icon-svg-logo.svg" alt="Google">
              <span class="ml-2">Google</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Composant de navigation du fil d’Ariane

Un composant de navigation complexe et monochromatique conçu pour les portefeuilles, doté d’une interface utilisateur en mode sombre et d’une réactivité totale.

Ouvrir Aperçu

                <nav class="flex" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse bg-gray-900 dark:bg-gray-800 p-3 rounded-lg shadow-lg">
    <li class="inline-flex items-center">
      <a href="#" class="inline-flex items-center text-sm font-medium text-gray-400 hover:text-white dark:text-gray-500 dark:hover:text-white transition-colors duration-200">
        <svg class="w-4 h-4 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
          <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"/>
        </svg>
        Home
      </a>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
        </svg>
        <a href="#" class="ms-1 text-sm font-medium text-gray-400 hover:text-white dark:text-gray-500 dark:hover:text-white md:ms-2 transition-colors duration-200">Projects</a>
      </div>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <svg class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
        </svg>
        <span class="ms-1 text-sm font-medium text-gray-200 dark:text-gray-400 md:ms-2">Web Development</span>
      </div>
    </li>
    <li aria-current="page" class="hidden sm:inline-flex">
      <div class="flex items-center">
        <svg class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
        </svg>
        <span class="ms-1 text-sm font-medium text-gray-200 dark:text-gray-400 md:ms-2">E-commerce Platform</span>
      </div>
    </li>
  </ol>
</nav>

Photography_Contact_Form

Un formulaire de contact épuré et minimaliste pour les portfolios de photographie, inspiré de la typographie suisse/internationale, avec une palette de couleurs rétro/vintage discrète. Entièrement réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 font-sans">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 space-y-6">
    <div>
      <h2 class="text-center text-3xl font-extrabold text-gray-900 dark:text-gray-100 tracking-tight leading-tight">
        Contact Photographer
      </h2>
      <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
        Get in touch for bookings or inquiries.
      </p>
    </div>
    <form class="space-y-6" action="#" method="POST">
      <div>
        <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
          Name
        </label>
        <div class="mt-1">
          <input id="name" name="name" type="text" autocomplete="name" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 transition duration-150 ease-in-out sm:text-sm">
        </div>
      </div>
      <div>
        <label for="email-address" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
          Email address
        </label>
        <div class="mt-1">
          <input id="email-address" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 transition duration-150 ease-in-out sm:text-sm">
        </div>
      </div>
      <div>
        <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
          Message
        </label>
        <div class="mt-1">
          <textarea id="message" name="message" rows="4" required class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 transition duration-150 ease-in-out sm:text-sm"></textarea>
        </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-amber-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:bg-amber-700 dark:hover:bg-amber-800 dark:focus:ring-offset-gray-800 transition duration-150 ease-in-out">
          Send Message
        </button>
      </div>
    </form>
  </div>
</div>

Organic_Nature_Inspired_Real_Estate_Footer

Un composant de pied de page complexe, inspiré de la nature et de couleur complémentaire pour les plateformes immobilières, avec des lignes fluides, des formes naturelles, de multiples éléments interactifs et une réactivité totale avec la prise en charge du mode sombre.

Ouvrir Aperçu

                <footer class="bg-gradient-to-br from-green-50 to-blue-50 text-gray-800 py-12 dark:from-green-950 dark:to-blue-950 dark:text-gray-200 overflow-hidden relative">
  <!-- Background organic shapes - these are visual only and might need careful positioning -->
  <div class="absolute -bottom-20 -left-20 w-80 h-80 rounded-full bg-green-200 opacity-30 blur-3xl dark:bg-green-700 dark:opacity-20 transition-all duration-500 ease-in-out"></div>
  <div class="absolute -top-10 -right-10 w-96 h-96 rounded-full bg-blue-200 opacity-30 blur-3xl dark:bg-blue-700 dark:opacity-20 transition-all duration-500 ease-in-out"></div>
  <div class="absolute bottom-1/4 left-1/4 w-60 h-60 rounded-full bg-green-100 opacity-20 blur-2xl dark:bg-green-800 dark:opacity-10 transition-all duration-500 ease-in-out"></div>

  <div class="container mx-auto px-4 relative z-10">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-10 lg:gap-12">

      <!-- Company Info / Logo -->
      <div class="lg:col-span-2 flex flex-col items-start">
        <a href="#" class="flex items-center space-x-3 mb-6 transition-transform hover:scale-105 duration-300">
          <img src="https://picsum.photos/id/10/50/50" alt="Nature Estate Logo" class="rounded-full shadow-lg border-2 border-green-400 dark:border-green-600">
          <span class="font-extrabold text-3xl text-green-700 dark:text-green-300 font-serif">NatureNest</span>
        </a>
        <p class="text-base leading-relaxed text-gray-700 dark:text-gray-300 mb-6 max-w-sm">
          Discover your dream home nestled in harmony with nature. We connect you to serene properties that breathe life into your living.
        </p>
        <form class="w-full max-w-sm relative group">
          <input type="email" placeholder="Your email for updates..." class="w-full p-3 rounded-full bg-white bg-opacity-70 border-2 border-green-300 dark:bg-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent dark:border-green-700 pr-12 transition-all duration-300 group-focus-within:shadow-lg group-focus-within:border-blue-400">
          <button type="submit" class="absolute right-2 top-1/2 -translate-y-1/2 p-2 bg-green-500 rounded-full text-white hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-green-600 dark:hover:bg-green-700 transition-all duration-300">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
              <path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
            </svg>
          </button>
        </form>
      </div>

      <!-- Quick Links -->
      <div>
        <h3 class="text-xl font-bold mb-6 text-green-700 dark:text-green-300 border-b-2 border-green-400 pb-2 inline-block transition-colors duration-300">Quick Links</h3>
        <ul class="space-y-4">
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Properties</a></li>
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>About Us</a></li>
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Contact</a></li>
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Blog</a></li>
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Careers</a></li>
        </ul>
      </div>

      <!-- Services -->
      <div>
        <h3 class="text-xl font-bold mb-6 text-green-700 dark:text-green-300 border-b-2 border-green-400 pb-2 inline-block transition-colors duration-300">Services</h3>
        <ul class="space-y-4">
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Buy Property</a></li>
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Sell Property</a></li>
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Property Valuation</a></li>
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Mortgage Advice</a></li>
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Rental Management</a></li>
        </ul>
      </div>

      <!-- Contact Info -->
      <div>
        <h3 class="text-xl font-bold mb-6 text-green-700 dark:text-green-300 border-b-2 border-green-400 pb-2 inline-block transition-colors duration-300">Connect</h3>
        <ul class="space-y-4">
          <li class="flex items-start">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 mt-1 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.727A8 8 0 016.343 7.273L7.757 8.687a6 6 0 008.486 8.486l1.414 1.414z" />
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 7.273a4 4 0 115.656 5.656L10 17.657 4.343 12zm0 0L4.343 7.273m0 0L9.172 2.445" />
            </svg>
            <address class="not-italic text-gray-700 dark:text-gray-300">
              123 EcoLane, Green Oasis City, GO 45678
            </address>
          </li>
          <li class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.5 9.071c.325.399.075.95-.476 1.113l-1.424.378a12.013 12.013 0 008.68-8.68l.377-1.425c.164-.551.715-.801 1.113-.476l4.045 1.554A1 1 0 0121 16.72V19a2 2 0 01-2 2H5a2 2 0 01-2-2v-5.28a1 1 0 01.684-.948l1.554-4.045z" />
            </svg>
            <a href="tel:+1234567890" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">+1 (234) 567-890</a>
          </li>
          <li class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26c.73.48 1.67.48 2.4 0L21 8m-18 8V6a2 2 0 012-2h14a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
            </svg>
            <a href="mailto:[email protected]" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">[email protected]</a>
          </li>
        </ul>
      </div>

    </div>

    <div class="mt-12 pt-8 border-t border-green-300 dark:border-green-700 flex flex-col md:flex-row items-center justify-between text-sm text-gray-600 dark:text-gray-400">
      <p class="mb-4 md:mb-0">&copy; 2023 NatureNest. All rights reserved. <span class="hidden md:inline">|</span> <br class="md:hidden"> Designed with nature in mind.</p>
      <div class="flex space-x-6">
        <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Privacy Policy</a>
        <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Terms of Service</a>
        <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Sitemap</a>
      </div>
    </div>
  </div>
</footer>

Menu Hamburger bio en niveaux de gris

Un composant de menu hamburger réactif avec un style de conception organique et fluide utilisant une palette de couleurs en niveaux de gris. Idéal pour la documentation ou les sites wiki, avec prise en charge du mode sombre et un effet de transition en douceur pour la bascule du menu.

Ouvrir Aperçu

                <div class="bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
  <nav class="container mx-auto px-4 py-3 flex items-center justify-between">
    <a href="#" class="flex-shrink-0 text-gray-900 dark:text-gray-50 text-2xl font-bold font-serif italic tracking-wide">
      FlowDocs
    </a>

    <!-- Mobile Hamburger Button -->
    <button class="lg:hidden p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 group" aria-label="Toggle menu">
      <div class="space-y-2">
        <span class="block h-0.5 w-8 bg-gray-700 dark:bg-gray-300 transform transition duration-300 ease-in-out group-focus:translate-y-2 group-focus:rotate-45"></span>
        <span class="block h-0.5 w-8 bg-gray-700 dark:bg-gray-300 transition duration-300 ease-in-out group-focus:opacity-0"></span>
        <span class="block h-0.5 w-8 bg-gray-700 dark:bg-gray-300 transform transition duration-300 ease-in-out group-focus:-translate-y-2 group-focus:-rotate-45"></span>
      </div>
    </button>

    <!-- Desktop Menu Items -->
    <div class="hidden lg:flex items-center space-x-8">
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200 ease-in-out font-medium text-lg">
        Documentation
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200 ease-in-out font-medium text-lg">
        Guides
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200 ease-in-out font-medium text-lg">
        API
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200 ease-in-out font-medium text-lg">
        Community
      </a>
      <a href="#" class="py-2 px-4 rounded-full bg-gray-800 text-gray-50 hover:bg-gray-900 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-gray-50 transition duration-200 ease-in-out text-lg font-semibold shadow-md">
        Get Started
      </a>
    </div>
  </nav>

  <!-- Mobile Menu (Invisible by default, would be toggled by JS) -->
  <!-- For Tailwind-only, this would typically require a hidden/block class toggle. -->
  <!-- As we are JS-free, this is a conceptual placeholder representing what would animate. -->
  <div class="hidden lg:hidden flex-col items-stretch text-center pb-4 space-y-4 bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
    <a href="#" class="block py-3 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out font-medium text-xl shadow-inner">
      Documentation
    </a>
    <a href="#" class="block py-3 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out font-medium text-xl">
      Guides
    </a>
    <a href="#" class="block py-3 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out font-medium text-xl">
      API
    </a>
    <a href="#" class="block py-3 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out font-medium text-xl">
      Community
    </a>
    <a href="#" class="mx-4 py-3 px-6 rounded-full bg-gray-800 text-gray-50 hover:bg-gray-900 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-gray-50 transition duration-200 ease-in-out text-xl font-semibold shadow-lg">
      Get Started
    </a>
  </div>
</div>

Luxury_Premium_Vibrant_Simple_Food_Restaurant_Feedback_Component

Un composant de retour d’information simple et élégant pour les sites Web d’alimentation/restaurant avec une palette de couleurs vives et à haute saturation et une prise en charge du mode sombre. Conçu pour une sensation de luxe / haut de gamme.

Ouvrir Aperçu

                <section class="py-12 bg-white dark:bg-gray-900 font-sans">
  <div class="container mx-auto px-4 max-w-2xl">
    <h2 class="text-4xl md:text-5xl font-extrabold text-center text-rose-600 dark:text-rose-400 mb-6 tracking-tight leading-tight">
      What Our Guests Say
    </h2>
    <p class="text-center text-lg text-gray-700 dark:text-gray-300 mb-12 max-w-xl mx-auto">
      Hear from those who've savored our culinary delights and experienced our exceptional service.
    </p>

    <div class="bg-gradient-to-br from-rose-100 to-rose-200 dark:from-rose-900 dark:to-rose-800 p-8 md:p-12 rounded-3xl shadow-xl border border-rose-300 dark:border-rose-700 transform hover:scale-105 transition duration-300 ease-in-out">
      <div class="flex items-center justify-center mb-6">
        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Customer Avatar" class="w-24 h-24 rounded-full border-4 border-rose-500 dark:border-rose-400 object-cover shadow-lg">
      </div>
      <p class="text-center text-xl md:text-2xl italic text-rose-900 dark:text-rose-100 leading-relaxed mb-6">
        "The ambiance was exquisite, and the pasta dish I had was simply divine. A true culinary masterpiece! I've never tasted anything quite like it. Highly recommend for a special occasion."
      </p>
      <div class="flex justify-center items-center gap-1 mb-6">
        <svg class="w-6 h-6 text-rose-500 dark:text-rose-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        <svg class="w-6 h-6 text-rose-500 dark:text-rose-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        <svg class="w-6 h-6 text-rose-500 dark:text-rose-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        <svg class="w-6 h-6 text-rose-500 dark:text-rose-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        <svg class="w-6 h-6 text-rose-500 dark:text-rose-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
      </div>
      <p class="text-center text-lg font-semibold text-rose-700 dark:text-rose-200">Sophia M.</p>
      <p class="text-center text-md text-rose-600 dark:text-rose-300">Frequent Guest</p>
    </div>

  </div>
</section>

Minimaliste Jewel Tone Forme du gouvernement

Un composant de formulaire réactif et minimaliste pour les sites Web gouvernementaux ou de service public, avec des tons de bijou et la prise en charge du mode sombre. Il comprend des champs pour les informations personnelles, les coordonnées et un message.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 lg:p-12 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="px-6 py-8 md:px-8 bg-gradient-to-r from-emerald-600 to-teal-700 dark:from-emerald-800 dark:to-teal-900 text-white">
      <h2 class="text-2xl sm:text-3xl font-bold mb-2">Submit Your Inquiry</h2>
      <p class="text-sm sm:text-base opacity-90">Please fill out the form below with accurate information. All fields are required unless otherwise noted.</p>
    </div>

    <form class="p-6 md:p-8 space-y-6 text-gray-800 dark:text-gray-200">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
          <label for="first_name" class="block text-sm font-medium mb-1">First Name</label>
          <input type="text" id="first_name" name="first_name" placeholder="John" required class="w-full px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-50 focus:outline-none focus:ring-2 focus:ring-emerald-500 dark:focus:ring-emerald-400 transition duration-200 ease-in-out placeholder-gray-400 dark:placeholder-gray-500">
        </div>
        <div>
          <label for="last_name" class="block text-sm font-medium mb-1">Last Name</label>
          <input type="text" id="last_name" name="last_name" placeholder="Doe" required class="w-full px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-50 focus:outline-none focus:ring-2 focus:ring-emerald-500 dark:focus:ring-emerald-400 transition duration-200 ease-in-out placeholder-gray-400 dark:placeholder-gray-500">
        </div>
      </div>

      <div>
        <label for="email" class="block text-sm font-medium mb-1">Email Address</label>
        <input type="email" id="email" name="email" placeholder="[email protected]" required class="w-full px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-50 focus:outline-none focus:ring-2 focus:ring-emerald-500 dark:focus:ring-emerald-400 transition duration-200 ease-in-out placeholder-gray-400 dark:placeholder-gray-500">
      </div>

      <div>
        <label for="phone" class="block text-sm font-medium mb-1">Phone Number (Optional)</label>
        <input type="tel" id="phone" name="phone" placeholder="+1 (555) 123-4567" class="w-full px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-50 focus:outline-none focus:ring-2 focus:ring-emerald-500 dark:focus:ring-emerald-400 transition duration-200 ease-in-out placeholder-gray-400 dark:placeholder-gray-500">
      </div>

      <div>
        <label for="subject" class="block text-sm font-medium mb-1">Subject of Inquiry</label>
        <select id="subject" name="subject" required class="w-full px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-50 focus:outline-none focus:ring-2 focus:ring-emerald-500 dark:focus:ring-emerald-400 transition duration-200 ease-in-out">
          <option value="" disabled selected>Select a subject</option>
          <option value="general_inquiry">General Inquiry</option>
          <option value="technical_support">Technical Support</option>
          <option value="feedback">Feedback</option>
          <option value="report_issue">Report an Issue</option>
          <option value="other">Other</option>
        </select>
      </div>

      <div>
        <label for="message" class="block text-sm font-medium mb-1">Your Message</label>
        <textarea id="message" name="message" rows="5" placeholder="Provide details about your inquiry..." required class="w-full px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-50 focus:outline-none focus:ring-2 focus:ring-emerald-500 dark:focus:ring-emerald-400 transition duration-200 ease-in-out placeholder-gray-400 dark:placeholder-gray-500 resize-y"></textarea>
      </div>

      <div class="flex items-center space-x-2">
        <input type="checkbox" id="terms" name="terms" required class="h-5 w-5 text-emerald-600 dark:text-emerald-500 focus:ring-emerald-500 dark:focus:ring-emerald-400 border-gray-300 dark:border-gray-600 rounded">
        <label for="terms" class="text-sm">I agree to the <a href="#" class="text-emerald-600 dark:text-emerald-500 hover:underline">terms and conditions</a>.</label>
      </div>

      <div class="flex justify-end">
        <button type="submit" class="px-8 py-3 bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-700 dark:hover:bg-emerald-800 text-white font-semibold rounded-md shadow-lg transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-emerald-500 dark:focus:ring-emerald-600 focus:ring-opacity-50">
          Submit Inquiry
        </button>
      </div>
    </form>
  </div>
</div>

Accordéon en mode sombre (Finance/Banque)

Un composant d’accordéon simple, monochrome et sombre conçu pour les interfaces financières et bancaires. Il présente un design réactif et une prise en charge du mode sombre, en utilisant des nuances d’une seule couleur pour un look épuré.

Ouvrir Aperçu

                <div class="max-w-3xl mx-auto p-4 sm:p-6 lg:p-8 bg-gray-900 dark:bg-gray-950 text-gray-100 min-h-screen">
  <h2 class="text-3xl font-bold text-center mb-8 text-blue-300 dark:text-blue-500">FAQs about Your Account</h2>

  <div class="space-y-4">

    <!-- Accordion Item 1 -->
    <details class="group">
      <summary class="flex justify-between items-center px-6 py-4 cursor-pointer focus:outline-none bg-gray-800 dark:bg-gray-800 rounded-lg shadow-md hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200">
        <span class="text-lg font-semibold text-blue-200 dark:text-blue-400">How do I check my account balance?</span>
        <svg class="h-6 w-6 text-blue-300 dark:text-blue-500 transition-transform duration-300 group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </summary>
      <div class="px-6 py-4 mt-2 bg-gray-850 dark:bg-gray-900 rounded-lg text-gray-300 dark:text-gray-400 text-base leading-relaxed">
        You can check your account balance by logging into your online banking portal, using our mobile app, or by visiting any of our ATM locations. Balances are updated in real-time.
      </div>
    </details>

    <!-- Accordion Item 2 -->
    <details class="group">
      <summary class="flex justify-between items-center px-6 py-4 cursor-pointer focus:outline-none bg-gray-800 dark:bg-gray-800 rounded-lg shadow-md hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200">
        <span class="text-lg font-semibold text-blue-200 dark:text-blue-400">What are the fees associated with my account?</span>
        <svg class="h-6 w-6 text-blue-300 dark:text-blue-500 transition-transform duration-300 group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </summary>
      <div class="px-6 py-4 mt-2 bg-gray-850 dark:bg-gray-900 rounded-lg text-gray-300 dark:text-gray-400 text-base leading-relaxed">
        Fees vary depending on your account type. Please refer to your account agreement for a detailed list of charges, or you can find a comprehensive fee schedule on our website under the 'Pricing' section.
      </div>
    </details>

    <!-- Accordion Item 3 -->
    <details class="group">
      <summary class="flex justify-between items-center px-6 py-4 cursor-pointer focus:outline-none bg-gray-800 dark:bg-gray-800 rounded-lg shadow-md hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200">
        <span class="text-lg font-semibold text-blue-200 dark:text-blue-400">How do I transfer funds between accounts?</span>
        <svg class="h-6 w-6 text-blue-300 dark:text-blue-500 transition-transform duration-300 group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </summary>
      <div class="px-6 py-4 mt-2 bg-gray-850 dark:bg-gray-900 rounded-lg text-gray-300 dark:text-gray-400 text-base leading-relaxed">
        You can easily transfer funds via our online banking platform or mobile app. Simply navigate to the 'Transfers' section, select your 'from' and 'to' accounts, enter the amount, and confirm the transaction.
      </div>
    </details>

    <!-- Accordion Item 4 -->
    <details class="group">
      <summary class="flex justify-between items-center px-6 py-4 cursor-pointer focus:outline-none bg-gray-800 dark:bg-gray-800 rounded-lg shadow-md hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200">
        <span class="text-lg font-semibold text-blue-200 dark:text-blue-400">Can I set up recurring payments?</span>
        <svg class="h-6 w-6 text-blue-300 dark:text-blue-500 transition-transform duration-300 group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </summary>
      <div class="px-6 py-4 mt-2 bg-gray-850 dark:bg-gray-900 rounded-lg text-gray-300 dark:text-gray-400 text-base leading-relaxed">
        Yes, our online banking system allows you to set up recurring payments for bills and transfers. Go to the 'Bill Pay' or 'Transfers' section and look for the option to schedule future or recurring transactions.
      </div>
    </details>

  </div>
</div>

1 ... 32 33 34 35 36 ... 282

Catégories

Tous les composants