JSFiddle - React, Tailwind, and code Playground

by Lazaro Contreras

HTML

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

  <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>Dashboard tipo Azure</title>
    <!-- Estilos de Tailwind CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css">
  </head>

  <body class="bg-gray-200">
    <div class="flex h-screen">
      <!-- Menú lateral -->
      <div class="flex flex-col bg-blue-800 w-64">
        <div class="h-16 flex items-center justify-center text-white text-2xl font-bold">Mi Dashboard</div>
        <nav class="flex-1 text-white p-4">
          <a href="#" class="block py-2 px-4 rounded hover:bg-blue-700">Inicio</a>
          <a href="#" class="block py-2 px-4 rounded hover:bg-blue-700">Análisis</a>
          <a href="#" class="block py-2 px-4 rounded hover:bg-blue-700">Configuración</a>
          <a href="#" class="block py-2 px-4 rounded hover:bg-blue-700">Ayuda</a>
        </nav>
      </div>
      <!-- Contenido principal -->
      <div class="flex-1">
        <!-- Barra de comandos -->
        <div class="bg-white shadow-md py-4 px-6">
          <div class="flex items-center">
            <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
              <i class="fas fa-plus mr-2"></i> Nuevo
            </button>
            <div class="flex-1"></div>
            <div class="relative">
              <input type="text" class="bg-gray-200 focus:bg-white border border-gray-400 rounded-full py-2 pl-8 pr-3 w-64" placeholder="Buscar...">
              <div class="absolute top-0 left-0 mt-2 ml-2">
                <i class="fas fa-search text-gray-400"></i>
              </div>
            </div>
            <div class="flex-1"></div>
            <div class="flex items-center">
              <button class="bg-gray-300 hover:bg-gray-400 text-gray-700 px-4 py-2 rounded-full">
                <i class="fas...