JSFiddle - React, Tailwind, and code Playground

by Maiki Nahara

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="theme-color" content="#2196f3">
  <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap:">
  <title>Framework7 Admin Dashboard</title>
  <link rel="stylesheet" href="https://unpkg.com/framework7/css/framework7.bundle.min.css">
  <link rel="stylesheet" href="https://unpkg.com/framework7-icons">
  <style>
    :root {
      --f7-panel-transition-duration: 250ms;
      --f7-bars-bg-color: #fff;
      --f7-page-bg-color: #f2f3f8;
      --f7-navbar-border-color: transparent;
      --f7-navbar-shadow-image: linear-gradient(to bottom,
        rgba(0,0,0,0.15) 0%,
        rgba(0,0,0,0.08) 40%,
        rgba(0,0,0,0.04) 50%,
        rgba(0,0,0,0) 90%,
        rgba(0,0,0,0) 100%
      );

    }
    .aurora {
      --f7-list-item-text-font-size: 13px;
      --f7-list-item-text-line-height: 18px;
      --f7-panel-collapsed-width: 44px;
    }
    .ios {
      --f7-panel-collapsed-width: 58px;
    }
    .md {
      --f7-panel-collapsed-width: 60px;
    }
    
    @media (min-width: 1024px) {
      .panel-open[data-panel="left"] {
        display: none !important;
      }
    }
    .panel-left.theme-dark {
      --f7-list-chevron-icon-color: rgba(255,255,255,0.4);
    }
    .panel-left .list .icon,
    .panel-left .treeview .icon {
      color: #fff;
    }
    .panel-left .active-link {
      background-color: var(--f7-theme-color);
      --f7-list-link-hover-bg-color: var(--f7-theme-color-tint);
      --f7-list-link-pressed-bg-color: var(--f7-theme-color-shade);
    }

    .dashboard-cards {
      --f7-card-margin-vertical: 0px;
      --f7-card-margin-horizontal:...