Composante des composantes interactives
Composant de composants interactifs avec conception de skeuomorphisme, schéma de couleurs analogue et complexité modérée à des fins de blog/contenu. Conception réactive avec prise en charge du thème sombre. Pas de code JavaScript.
HTML Code
<div class="bg-gray-200 dark:bg-gray-900 p-6 rounded-lg shadow-xl max-w-sm mx-auto">
<div class="relative">
<img class="w-full h-48 object-cover rounded-md border-4 border-gray-300 dark:border-gray-700" src="https://picsum.photos/seed/skeuomorphism/400/300" alt="Article Image">
<div class="absolute bottom-0 right-0 bg-gradient-to-tl from-gray-400 to-gray-300 dark:from-gray-700 dark:to-gray-800 text-gray-800 dark:text-gray-200 text-xs px-2 py-1 rounded-tl-lg">Skeuomorphism</div>
</div>
<div class="mt-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Blog Post Title</h2>
<p class="text-gray-700 dark:text-gray-300 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="flex justify-between items-center mt-4">
<div class="flex items-center">
<img class="w-8 h-8 rounded-full mr-2 border-2 border-gray-300 dark:border-gray-700" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
<span class="text-gray-700 dark:text-gray-300 text-sm">John Doe</span>
</div>
<button class="bg-gradient-to-br from-blue-500 to-purple-600 text-white px-4 py-2 rounded-full shadow-md hover:shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1">Read More</button>
</div>
<div class="mt-4 flex justify-around text-gray-600 dark:text-gray-400 text-sm">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M18 3a1 1 0 00-1.447-.894L10 6l-6.553-3.894A1 1 0 002 3v14a1 1 0 001 1h14a1 1 0 001-1V3z" clip-rule="evenodd" />
</svg>
<span>Save</span>
</div>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
<path d="M15 8a3 3 0 10-2.977-2.455l-4.78 2.49a3 3 0 00-4.633.908l-1.5-.8A3 3 0 105 12v1a1 1 0 100 2v1a1 1 0 100 2h2a1 1 0 100-2h1a1 1 0 100-2h2a1 1 0 100-2h3a3 3 0 10-3-3zm-3.154 9A3 3 0 1016 13.802v-4.036l-.078.04A2.005 2.005 0 0115 9a2 2 0 11-1.923 2.554l-.078.04V17z" />
</svg>
<span>Share</span>
</div>
</div>
</div>Composants associés
Composante des composantes interactives
Un composant complexe et interactif de style Neumorphisme avec une palette de couleurs vives, conçu pour les sites Web d’alimentation/restaurants. Il comprend des boutons interactifs, des curseurs et des éléments de sélection, avec une prise en charge du mode sombre et une réactivité totale.
Composante des composantes interactives
Un composant interactif ludique et lumineux conçu pour les entreprises manufacturières/industrielles, avec une base en noir et blanc avec une couleur d’accent vibrante, des éléments arrondis et une esthétique conviviale.
Composante des composantes interactives
Composant de composants interactifs avec conception 3D, palette de couleurs monochromatique et complexité modérée pour le commerce électronique, avec conception réactive et prise en charge du thème sombre.