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>

<!-- Подключение head и navbar -->
{% include 'static/head.html' %}
{% include 'static/navbar.html' %}
</head>

<body>
  <style>
      .actions {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
      }
      .actions .btn, .actions .input-field {
          margin-right: 15px;
      }
      .input-field input[type="date"] {
          width: 150px;
      }
      .search-field {
          flex-grow: 1;
      }
      .search-field .input-field input {
          width: 100%;
      }
  </style>


  <div class="container">
        <h3 class="head-table">Парк автомобилей</h3>
        <div class="row margin-left-10">
            <div class="col s12 actions ">
                <a href="#modal_auto_add" class="modal-trigger waves-effect waves-light btn green">Добавить автомобиль</a>
                <div class="search-field input-field">
                    <i class="material-icons prefix">search</i>
                    <input id="search" type="text" class="validate">
                    <label for="search">Поиск</label>
                </div>
            </div>
        </div>
  
      <!-- Таблица автомобилей -->
      <table class="highlight responsive-table">
          <thead>
            <tr>
              <th><div class="headtable blue-text">Статус автомобиля</div></th>
              <th><div class="headtable blue-text">Госномер</div></th>
              <th><div class="headtable blue-text">Последний водитель</div></th>
              <th><div class="headtable blue-text">Пробег (км)</div></th>
              <th><div class="headtable blue-text">Последний маршрут</div></th>
            </tr>
          </thead>
          <tbody>
            {% for truck in trucks %}
            <tr>
               ...