JSFiddle - React, Tailwind, and code Playground

by Sergey khorev

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CRM Dashboard with Kanban</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .kanban-column {
            min-height: 70vh;
        }
        .kanban-item {
            transition: all 0.3s ease;
        }
        .kanban-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        .dragging {
            opacity: 0.5;
            background: #f0f0f0;
        }
        .kanban-dropzone {
            min-height: 20px;
            transition: background 0.3s;
        }
        .kanban-dropzone.active {
            background: rgba(0, 0, 0, 0.05);
        }
    </style>
</head>
<body class="bg-gray-100 font-sans">
    <div class="flex h-screen overflow-hidden">
        <!-- Sidebar -->
        <div class="hidden md:flex md:flex-shrink-0">
            <div class="flex flex-col w-64 bg-indigo-800 text-white">
                <div class="flex items-center justify-center h-16 px-4 border-b border-indigo-700">
                    <div class="flex items-center">
                        <i class="fas fa-cubes text-2xl mr-2 text-indigo-300"></i>
                        <span class="text-xl font-semibold">CRM Pro</span>
                    </div>
                </div>
                <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto">
                    <div class="space-y-1">
                        <a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-md bg-indigo-900 text-white">
                            <i class="fas fa-tachometer-alt mr-3 text-indigo-300"></i>
                            Dashboard
                        </a>
                        <a href="#" class="flex...