JSFiddle - React, Tailwind, and code Playground

by Lazaro Contreras

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Azure Dashboard</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css">
  </head>

  <body>
    <nav class="bg-blue-700 text-white py-4 px-8 flex justify-between">
      <div class="text-2xl font-bold">Azure Dashboard</div>
      <div>
        <a href="#" class="mx-2 hover:underline">Home</a>
        <a href="#" class="mx-2 hover:underline">Settings</a>
        <a href="#" class="mx-2 hover:underline">Logout</a>
      </div>
    </nav>
    <div class="flex">
      <div class="w-1/5 p-4">
        <h2 class="text-lg font-bold mb-4">Navigation</h2>
        <ul class="list-reset">
          <li class="mb-2"><a href="#" class="block text-blue-700 hover:text-blue-900 font-bold">Dashboard</a></li>
          <li class="mb-2"><a href="#" class="block text-blue-700 hover:text-blue-900 font-bold">Virtual Machines</a></li>
          <li class="mb-2"><a href="#" class="block text-blue-700 hover:text-blue-900 font-bold">Storage</a></li>
          <li class="mb-2"><a href="#" class="block text-blue-700 hover:text-blue-900 font-bold">Network</a></li>
          <li class="mb-2"><a href="#" class="block text-blue-700 hover:text-blue-900 font-bold">Security</a></li>
          <li class="mb-2"><a href="#" class="block text-blue-700 hover:text-blue-900 font-bold">Backup</a></li>
        </ul>
      </div>
      <div class="w-4/5 p-4">
        <h2 class="text-lg font-bold mb-4">Dashboard</h2>
        <div class="flex justify-between gap-4 flex-wrap">
          <div class="flex-grow w-60 bg-white p-4 rounded-lg shadow">
            <h3 class="text-lg font-bold mb-2">Virtual Machines</h3>
            <p class="text-gray-700 mb-2">3 VMs running</p>
            <button class="bg-blue-700 hover:bg-blue-900 text-white py-2 px-4...