JSFiddle - React, Tailwind, and code Playground

by michananya

HTML

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Worklist - Sample Details</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<style>
        body {
            font-family: 'Roboto', sans-serif;
        }
        .bg-teal-700 {
            background-color: #2D6A69;
        }
        .bg-gray-50 {
            background-color: #F9FAFB;
        }
        .border-gray-200 {
            border-color: #E5E7EB;
        }
        .text-teal-700 {
            color: #2D6A69;
        }
        .bg-red-100 {
            background-color: #FEE2E2;
        }
        .text-red-600 {
            color: #DC2626;
        }
        .bg-green-100 {
            background-color: #D1FAE5;
        }
        .text-green-600 {
            color: #059669;
        }
        .bg-green-500 {
           background-color: #10B981;
        }
        .h-screen-minus-header {
            height: calc(100vh - 4rem);
        }
    </style>
</head>
<body class="bg-white text-gray-800">
<div class="flex flex-col h-screen">
<header class="bg-teal-700 text-white flex items-center justify-between px-4 py-2 shadow-md z-10">
<div class="flex items-center space-x-4">
<div class="text-2xl font-bold">lobos</div>
<div class="flex items-center text-sm">
<span class="material-icons">chevron_right</span>
<span>Worklist (Protime - pending rerun)</span>
<span class="material-icons">chevron_right</span>
<span>147710</span>
</div>
</div>
<div class="flex items-center space-x-4">
<div class="relative">
<input class="bg-teal-600 text-white placeholder-gray-300 rounded-md py-1 px-3 focus:outline-none focus:ring-2 focus:ring-white" placeholder="Search" type="text"/>
<span class="material-icons absolute right-2 top-1/2...