Composante des composantes interactives
Composant interactif de conception matérielle avec effets réactifs et prise en charge du thème sombre.
HTML Code
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Add Material Design inspired button styles */
.material-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.625rem 1rem;
font-size: 0.875rem;
font-weight: 500;
border-radius: 0.25rem;
transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.material-button:hover {
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}
/* Add Material Design card styles */
.material-card {
border-radius: 0.5rem;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
transition: box-shadow 0.15s ease-in-out;
}
.material-card:hover {
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}
/* Respond to dark mode */
@media (prefers-color-scheme: dark) {
.dark\:bg-gray-800 {
--tw-bg-opacity: 1;
background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
}
.dark\:text-white {
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.dark\:bg-blue-700 {
--tw-bg-opacity: 1;
background-color: rgba(29, 78, 216, var(--tw-bg-opacity));
}
.dark\:hover\:bg-blue-800:hover {
--tw-bg-opacity: 1;
background-color: rgba(30, 64, 175, var(--tw-bg-opacity));
}
.dark\:bg-gray-700 {
--tw-bg-opacity: 1;
background-color: rgba(55, 65, 81, var(--tw-bg-opacity));
}
.dark\:border-gray-600 {
--tw-border-opacity: 1;
border-color: rgba(75, 85, 99, var(--tw-border-opacity));
}
}
</style>
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-4">
<div class="material-card w-full max-w-sm bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6">
<div class="flex justify-center mb-6">
<img class="w-24 h-24 rounded-full border-4 border-blue-500 dark:border-blue-700" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar">
</div>
<div class="text-center mb-6">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white">John Doe</h2>
<p class="text-gray-600 dark:text-gray-300">Software Engineer</p>
</div>
<div class="flex justify-around">
<button class="material-button bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800">
Follow
</button>
<button class="material-button bg-white text-gray-800 border border-gray-300 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-opacity-50 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600">
Message
</button>
</div>
</div>
</div>Composants associés
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.
BrutalismePortfolioInteractif
Composant de composants interactifs avec un design brutaliste, des couleurs vives et une mise en page complexe à des fins de portefeuille, réactif avec prise en charge du thème sombre.
Composante des composantes interactives
Composant de composants interactifs avec conception matérielle, schéma de couleurs triadique, complexité complexe, pour le commerce électronique, avec conception réactive et prise en charge du thème sombre.