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
Composantes interactives Composante 25
Un composant interactif de style Material Design avec une disposition en grille, un design réactif et la prise en charge du thème sombre.
Composant de tableau de bord simple
Composant de tableau de bord simple et réactif avec les principes de conception matérielle et la palette de couleurs vives.
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.