Composante des composantes interactives
Composant 3D interactif avec effets réactifs et prise en charge du thème sombre
HTML Code
<div class="dark:bg-gray-900 py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase dark:text-indigo-400">Interactive</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl dark:text-white">
A new way to engage
</p>
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto dark:text-gray-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="mt-10">
<dl class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
<div class="relative">
<dt>
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white transform -rotate-6 hover:rotate-0 transition duration-300 ease-in-out">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
</div>
<p class="ml-16 text-lg leading-6 font-medium text-gray-900 dark:text-white">Competitive exchange rates</p>
</dt>
<dd class="mt-2 ml-16 text-base text-gray-500 dark:text-gray-400">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
</dd>
</div>
<div class="relative">
<dt>
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white transform rotate-6 hover:rotate-0 transition duration-300 ease-in-out">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a2 2 0 002 2h9l.75-.75M7 16l3.5-3.5M14.25 8.25l.75-.75m0 0l2-2M7 16H3a2 2 0 00-2 2v2a2 2 0 002 2h14a2 2 0 002-2v-2a2 2 0 00-2-2h-4m5-10l2 2m0 0l2 2m0-4l-2-2m0 0l-2-2m-3 10l3.5-3.5" />
</svg>
</div>
<p class="ml-16 text-lg leading-6 font-medium text-gray-900 dark:text-white">No hidden fees</p>
</dt>
<dd class="mt-2 ml-16 text-base text-gray-500 dark:text-gray-400">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
</dd>
</div>
<div class="relative">
<dt>
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white transform rotate-3 hover:rotate-0 transition duration-300 ease-in-out">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<p class="ml-16 text-lg leading-6 font-medium text-gray-900 dark:text-white">Transfers are instant</p>
</dt>
<dd class="mt-2 ml-16 text-base text-gray-500 dark:text-gray-400">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
</dd>
</div>
<div class="relative">
<dt>
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white transform -rotate-3 hover:rotate-0 transition duration-300 ease-in-out">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h10m-9 4h4m-4 2h4M9 10H4a2 2 0 00-2 2v7a2 2 0 002 2h16a2 2 0 002-2v-7a2 2 0 00-2-2h-5l-.5-1.5z" />
</svg>
</div>
<p class="ml-16 text-lg leading-6 font-medium text-gray-900 dark:text-white">Mobile notifications</p>
</dt>
<dd class="mt-2 ml-16 text-base text-gray-500 dark:text-gray-400">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
</dd>
</div>
</dl>
</div>
</div>
</div>
Composants associés
Fiche produit brutaliste
Un composant simple de carte produit interactive pour le e-commerce, avec un design brutaliste en niveaux de gris. Il comporte une image de produit, un titre, un prix et un bouton « Ajouter au panier ». Le composant est réactif et prend en charge le mode sombre. Des effets de survol sont inclus pour l’interactivité.
Composante des composantes interactives
Composant interactif de conception matérielle avec effets réactifs et prise en charge du thème sombre.
Composante des composantes interactives
Un composant interactif d’inspiration brutaliste pour un blog, avec des tons de terre à contraste élevé, un design réactif et la prise en charge du mode sombre.