JSFiddle - React, Tailwind, and code Playground

by Sergey khorev

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
  <title>Тестовый сайт для логистической компании</title>

  <link href="{{ url_for('static', filename='css/materialize.css') }}" type="text/css" rel="stylesheet" media="screen,projection"/>
  <link href="{{ url_for('static', filename='css/style.css') }}" type="text/css" rel="stylesheet" media="screen,projection"/>
  <link rel="stylesheet" href="{{ url_for('static', filename='font-awesome-4.3.0/css/font-awesome.min.css') }}">
  <link rel="shortcut icon" href="{{ url_for('static', filename='favicon (7).ico') }}" type="image/x-icon">
  
</head>



</head>
<body>
   <nav class="light-blue darken-2">
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo">Логистика ТЕСТ</a>
      <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
      <ul class="right hide-on-med-and-down">
        <li><a href="#">Активные перевозки</a></li>
        <li><a href="#">История перевозок</a></li>
        <li><a href="#">Зарплата</a></li>
        <li><a href="#">Сотрудники\Автомобили</a></li>
        <li><a href="#">Выход</a></li>
      </ul>
      <ul class="side-nav" id="mobile-demo">
        <li><a href="#">Активные перевозки</a></li>
        <li><a href="#">История перевозок</a></li>
        <li><a href="#">Зарплата</a></li>
        <li><a href="#">Сотрудники\Автомобили</a></li>
        <li><a href="#">Выход</a></li>
      </ul>
    </div>
  </nav>
        
  <style>
    .head-table{
      /* border-right: 1px solid #d0d0d0; */
      text-align: center;
    }
  </style>
  <div class="section no-pad-bot white lighten-5" id="index-banner">
    <div class="container">

      <table class="striped responsive-table" >
        <h3 class="head-table">Активные перевозки</h3>
        <thead>
          <tr>
      ...

CSS

/*!
 * Materialize v1.0.0 (http://materializecss.com)
 * Copyright 2014-2017 Materialize
 * MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE)
 */
.materialize-red {
  background-color: #e51c23 !important;
}

.materialize-red-text {
  color: #e51c23 !important;
}

.materialize-red.lighten-5 {
  background-color: #fdeaeb !important;
}

.materialize-red-text.text-lighten-5 {
  color: #fdeaeb !important;
}

.materialize-red.lighten-4 {
  background-color: #f8c1c3 !important;
}

.materialize-red-text.text-lighten-4 {
  color: #f8c1c3 !important;
}

.materialize-red.lighten-3 {
  background-color: #f3989b !important;
}

.materialize-red-text.text-lighten-3 {
  color: #f3989b !important;
}

.materialize-red.lighten-2 {
  background-color: #ee6e73 !important;
}

.materialize-red-text.text-lighten-2 {
  color: #ee6e73 !important;
}

.materialize-red.lighten-1 {
  background-color: #ea454b !important;
}

.materialize-red-text.text-lighten-1 {
  color: #ea454b !important;
}

.materialize-red.darken-1 {
  background-color: #d0181e !important;
}

.materialize-red-text.text-darken-1 {
  color: #d0181e !important;
}

.materialize-red.darken-2 {
  background-color: #b9151b !important;
}

.materialize-red-text.text-darken-2 {
  color: #b9151b !important;
}

.materialize-red.darken-3 {
  background-color: #a21318 !important;
}

.materialize-red-text.text-darken-3 {
  color: #a21318 !important;
}

.materialize-red.darken-4 {
  background-color: #8b1014 !important;
}

.materialize-red-text.text-darken-4 {
  color: #8b1014 !important;
}

.red {
  background-color: #F44336 !important;
}

.red-text {
  color: #F44336 !important;
}

.red.lighten-5 {
  background-color: #FFEBEE !important;
}

.red-text.text-lighten-5 {
  color: #FFEBEE !important;
}

.red.lighten-4 {
  background-color: #FFCDD2 !important;
}

.red-text.text-lighten-4 {
  color: #FFCDD2 !important;
}

.red.lighten-3 {
  background-color: #EF9A9A !important;
}

.red-text.text-lighten-3 {
 ...