Composant du tableau de bord des crypto-monnaies
Un composant de tableau de bord de crypto-monnaie complexe et réactif avec un style de conception de typographie suisse/internationale, avec des éléments de dégradé multicolores et la prise en charge du mode sombre. Il comprend plusieurs sections telles qu’un aperçu du portefeuille, les tendances du marché, les transactions récentes et un graphique.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 font-sans p-4 sm:p-6 lg:p-8">
<!-- Header Section -->
<header class="flex flex-col sm:flex-row justify-between items-center mb-6 lg:mb-8 font-mono">
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight mb-4 sm:mb-0 bg-clip-text text-transparent bg-gradient-to-r from-red-500 via-yellow-500 to-blue-500 dark:from-red-300 dark:via-yellow-300 dark:to-blue-300">
CRYPTO DASHBOARD
</h1>
<div class="flex items-center space-x-4">
<div class="relative">
<input type="text" placeholder="Search..." class="py-2 px-4 rounded-full bg-white dark:bg-gray-800 border dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm sm:text-base">
<svg class="w-5 h-5 absolute right-3 top-1/2 -translate-y-1/2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</div>
<button class="p-2 rounded-full bg-white dark:bg-gray-800 border dark:border-gray-700 hover:ring-2 hover:ring-blue-500 focus:outline-none">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
</button>
</div>
</header>
<!-- Main Content Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-6">
<!-- Portfolio Overview Card -->
<div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 lg:p-8 flex flex-col">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl sm:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-300 dark:to-pink-300 capitalize">My Portfolio</h2>
<button class="text-sm text-gray-500 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-400">View All</button>
</div>
<div class="flex-grow grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="p-4 rounded-lg border-2 border-transparent bg-gradient-to-br from-green-400 to-blue-500 dark:from-green-600 dark:to-blue-700 shadow-lg group">
<p class="text-lg sm:text-xl font-semibold text-white">Total Balance</p>
<p class="text-3xl sm:text-4xl font-bold text-white mt-1">$12,345.67</p>
<span class="text-green-100 text-sm sm:text-base">+5.21% Today</span>
</div>
<div class="p-4 rounded-lg bg-gray-50 dark:bg-gray-700 shadow flex flex-col justify-between">
<div>
<p class="text-sm text-gray-500 dark:text-gray-400">Bitcoin (BTC)</p>
<p class="text-xl font-bold dark:text-gray-50">$34,567.89</p>
</div>
<div class="text-right">
<span class="text-green-500 dark:text-green-400 text-sm sm:text-base">+1.23%</span>
<p class="text-gray-600 dark:text-gray-300 text-xs sm:text-sm">~0.5 BTC</p>
</div>
</div>
<div class="p-4 rounded-lg bg-gray-50 dark:bg-gray-700 shadow flex flex-col justify-between">
<div>
<p class="text-sm text-gray-500 dark:text-gray-400">Ethereum (ETH)</p>
<p class="text-xl font-bold dark:text-gray-50">$2,100.25</p>
</div>
<div class="text-right">
<span class="text-red-500 dark:text-red-400 text-sm sm:text-base">-0.87%</span>
<p class="text-gray-600 dark:text-gray-300 text-xs sm:text-sm">~2.0 ETH</p>
</div>
</div>
<div class="p-4 rounded-lg bg-gray-50 dark:bg-gray-700 shadow flex flex-col justify-between">
<div>
<p class="text-sm text-gray-500 dark:text-gray-400">Ripple (XRP)</p>
<p class="text-xl font-bold dark:text-gray-50">$0.75</p>
</div>
<div class="text-right">
<span class="text-green-500 dark:text-green-400 text-sm sm:text-base">+3.45%</span>
<p class="text-gray-600 dark:text-gray-300 text-xs sm:text-sm">~1000 XRP</p>
</div>
</div>
</div>
</div>
<!-- Market Trends / Price Chart Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 lg:p-8 flex flex-col">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl sm:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-orange-500 to-red-500 dark:from-orange-300 dark:to-red-300 capitalize">Market Trends</h2>
<select class="text-sm text-gray-500 dark:text-gray-400 bg-transparent border-none focus:outline-none">
<option>1 Day</option>
<option>1 Week</option>
<option>1 Month</option>
</select>
</div>
<div class="flex-grow flex items-center justify-center">
<!-- Placeholder for Chart -->
<img src="https://picsum.photos/400/300?random=1" alt="Placeholder Chart" class="w-full h-auto rounded-md shadow-inner object-cover dark:filter dark:brightness-75">
</div>
<div class="mt-4 text-center text-sm text-gray-500 dark:text-gray-400">BTC/USD Price Chart</div>
</div>
<!-- Recent Transactions Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 lg:p-8 lg:col-span-2">
<h2 class="text-xl sm:text-2xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-teal-500 to-cyan-500 dark:from-teal-300 dark:to-cyan-300 capitalize">Recent Transactions</h2>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-gray-50 dark:bg-gray-700">
<tr>
<th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase tracking-wider">Type</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase tracking-wider">Amount</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase tracking-wider">Currency</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase tracking-wider">Date</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
<tr>
<td class="px-4 py-4 whitespace-nowrap text-sm text-green-500 dark:text-green-400">Buy</td>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">+0.012 BTC</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">BTC</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2023-10-26</td>
<td class="px-4 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100">Completed</span>
</td>
</tr>
<tr>
<td class="px-4 py-4 whitespace-nowrap text-sm text-red-500 dark:text-red-400">Sell</td>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">-0.5 ETH</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">ETH</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2023-10-25</td>
<td class="px-4 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100">Completed</span>
</td>
</tr>
<tr>
<td class="px-4 py-4 whitespace-nowrap text-sm text-green-500 dark:text-green-400">Buy</td>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">+100 XRP</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">XRP</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2023-10-24</td>
<td class="px-4 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-100">Pending</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Quick Actions Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 lg:p-8">
<h2 class="text-xl sm:text-2xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 to-purple-500 dark:from-indigo-300 dark:to-purple-300 capitalize">Quick Actions</h2>
<div class="grid grid-cols-2 gap-4">
<button class="flex flex-col items-center justify-center p-4 rounded-lg bg-blue-100 hover:bg-blue-200 dark:bg-blue-900 dark:hover:bg-blue-700 text-blue-800 dark:text-blue-100 font-semibold transition duration-150 ease-in-out">
<svg class="w-8 h-8 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 8h6m-5 0H7M9 8V5a2 2 0 012-2h4a2 2 0 012 2v3m-7 0L4 16m4-8l-.75 4M14 5v10m-3-4h.01M12 16l4-8m-3 8h.01"></path></svg>
Buy
</button>
<button class="flex flex-col items-center justify-center p-4 rounded-lg bg-red-100 hover:bg-red-200 dark:bg-red-900 dark:hover:bg-red-700 text-red-800 dark:text-red-100 font-semibold transition duration-150 ease-in-out">
<svg class="w-8 h-8 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
Sell
</button>
<button class="flex flex-col items-center justify-center p-4 rounded-lg bg-yellow-100 hover:bg-yellow-200 dark:bg-yellow-900 dark:hover:bg-yellow-700 text-yellow-800 dark:text-yellow-100 font-semibold transition duration-150 ease-in-out">
<svg class="w-8 h-8 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path></svg>
Send
</button>
<button class="flex flex-col items-center justify-center p-4 rounded-lg bg-green-100 hover:bg-green-200 dark:bg-green-900 dark:hover:bg-green-700 text-green-800 dark:text-green-100 font-semibold transition duration-150 ease-in-out">
<svg class="w-8 h-8 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
Receive
</button>
</div>
</div>
</div>
<!-- Footer/Disclaimer (Optional) -->
<footer class="mt-8 text-center text-sm text-gray-500 dark:text-gray-400">
<p>© 2023 Crypto Dashboard. All rights reserved. Data is for informational purposes only. </p>
</footer>
</div>Composants associés
Composant de tableau de bord
Un composant de tableau de bord simple avec un design 3D et une palette de couleurs pastel, réactif et avec prise en charge du mode sombre.
Tableau de bord d’entreprise rétro
Un composant de tableau de bord rétro/vintage en niveaux de gris pour les sites Web d’entreprise/d’entreprise, avec une complexité modérée et un design réactif. Prend en charge le thème sombre à l’aide du préfixe Tailwind CSS dark : pour le style. Images provenant de picsum.photos et avatars de randomuser.me.
Tableau de bord des médias sociaux
Un composant de tableau de bord réactif pour les réseaux sociaux avec des micro-interactions, une palette de couleurs complémentaires, une complexité modérée et une prise en charge du thème sombre à l’aide de Tailwind CSS. Comprend des profils d’utilisateurs avec des avatars de randomuser.me et des flux avec des images de picsum.photos.