JSFiddle - React, Tailwind, and code Playground

HTML

{% load static %}
{% load board_tag %}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="{% static 'static/css/bootstrap.css' %}">
    <script src="{% static 'static/jQuery/jquery-3.1.1.js' %}"></script>
    <link rel="stylesheet" href="{% static 'static/lightbox/css/lightbox.css' %}">
    <script src="{% static 'static/lightbox/js/lightbox.js' %}"></script>
    <script src="{% static 'static/js/main.js' %}"></script>
    <link rel="stylesheet" type="text/css" href="{% static 'static/css/main.css' %}">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"></script>
    <script type="text/template" id="template-thread">
        <div class="container container_board_index">
        <span>
            <% if (data[i].fields.thread_tittle != '') %> <b> <%= data[i].fields.thread_tittle %> </b>
            Аноним <%= data[i].fields.thread_time %>
            [ <a href="/{{ name_board }}/res/<%= data[i].pk %>.html" class="link_color_all">Ответ</a> ]
        </span><br>
        <% if (data[i].fields.thread_image != '') { %>
            <div class="container container_tittle_thread">
                <a href="/upload/<%= data[i].fields.thread_image %>" class="link_color_img"> <%= data[i].fields.thread_image %></a>
            </div>
            <a data-lightbox="image-1" href="/upload/<%= data[i].fields.thread_image %>">
                <img src="/upload/<%= data[i].fields.thread_image %>" width="16%" height="16%" align="left"/>
            </a>
        <% } %>
        <p><%= data[i].fields.thread_text %></p>
        <hr class="board">
        </div>
    </script>
    <script type="text/template" id="template-comment">
        <div class="container container_comments_index">
            <div class="container_comments">
                <span>
                    <% if (data[y].fields.comments_tittle != '') %> <b> <%=...

CSS

.table_index {
    width: 100%;
    border-spacing: 1px;
    border-collapse: separate;
    border: 1px #D7D7D7 solid;
    background-color: white;
}

td.head {
    background-color: #f5dd5d;
}

.tr_index_1 {
    background: white;
}

.tr_index_2:nth-child(2n-1) {
  background: #c0c0c0;
}

body {
    background-color: #eeeeee;
}

.navbar {
    background-color: #eeeeee;
    margin-bottom: 0;
    min-height: 0;
    border: 0;
}

.container_navbar {
    padding: 5px;
    width: 100%;
    height: 30px;
}

.container_contacts {
    width: 250px;
    background-color: lightgray;
    margin: 5px;
    padding: 10px;
    border-radius: 5px;
}

.container_comments_index {
    margin: 5px;
    padding-left: 0;
    padding-right: 0;
}

.container_comments {
    background-color: lightgray;
    margin: 5px;
    margin-bottom: 0;
    padding: 10px;
    border-radius: 3px;
    display: inline-block;
}

.container_contacts_text {
    margin: 5px;
}

.container_index_text {
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 5px;
    background-clip: content-box;
    background-color: white;
    border: 1px #D7D7D7 solid;
}

.container_board_index {
    margin: 0;
    width: 100%;
}

.container_tittle_thread {
    margin: 0;
    width: 100%;
    padding-left: 0;
}

.board_center_text {
    text-align: center;
}

.link_color_all {
    color: orange;
}

.link_color_table {
    color: black;
    text-decoration: underline;
}

.link_color_img {
    color: orange;
    text-decoration: underline;
    font-size: smaller;
}

a.mainlogo {
    text-decoration: none;
    color: orange;
}

h1 {
    margin-bottom: 0;
    margin-top: 0;
}

hr {
    visibility: visible;
    color: black;
    width: 99%;
    height: 1px;
    background-color: black;
    margin-bottom: 10px;
    margin-top: 10px;
}

hr.index {
    width: 99%;
    margin-top: 0;
}

hr.board {
    width: 100%;
}

hr.comments {
    width: 97.7%;
}

a.menu {
    color: orange;
    text-decoration: underline;
   ...

JavaScript

$('.link-reply').mouseover(function () {
        var tooltip = $(this).data('num');
        var some_link_reply = $(this);
        $.ajax({
            type: 'GET',
            dataType: 'json',
            data: {
                'tooltip': tooltip,
            },
            url: '/AjaxTooltip.json',
            success: function (data) {
                console.log(data);
                parse_datetime(data, 0);
                var tmpl = _.template(document.getElementById('template-tooltip').innerHTML);
                var result = tmpl({data: data});
                $('.dynamic1').append(result);
                $('.tooltip').css({left: some_link_reply.offset().left + 15 , top: some_link_reply.offset().top + 15, opacity: 1});
            }
        });
    });
    $('.link-reply').mouseout(function () {
            $('.tooltip').remove()
    })