JSFiddle - React, Tailwind, and code Playground

by cheack

HTML

<div class="posts-table">
    <div class="posts-head-row">
        <div class="posts-cell">Дата</div>
        <div class="posts-cell">Фото</div>
        <div class="posts-cell">Марка/модель</div>
        <div class="posts-cell">Кузов/двигатель</div>
        <div class="posts-cell">Название</div>
        <div class="posts-cell">Положение</div>
        <div class="posts-cell">№</div>
        <div class="posts-cell">Цена, руб.</div>
        <div class="posts-cell">Продавец</div>
    </div>

    <a class="posts-row  ">
        <div class="posts-cell">28.10.2014 03:04</div>
        <div class="posts-cell"><img style="max-width: 100px;" width="100" heigh="100"/></div>
        <div class="posts-cell">Citroen Xantia</div>
        <div class="posts-cell">asdsd-457</div>
        <div class="posts-cell">Знак остановки</div>
        <div class="posts-cell">_Тут положение_</div>
        <div class="posts-cell">9027</div>
        <div class="posts-cell"><b>500</b>
            <input class="note" type="text" data-id="9027" placeholder="Ваш комментарий"/>
        </div>
        <div class="posts-cell">
           <span class="company-info-block">ООО "Компания автозапчастей"</span>
           <span class="company-info-block">Показать телефон</span>
           <span class="company-info-block">Заполярный</span>
        </div>
    </a>

    <a class="posts-row  ">
        <div class="posts-cell">28.10.2014 03:04</div>
        <div class="posts-cell"><img style="max-width: 100px;" width="100" heigh="100"/></div>
        <div class="posts-cell">Citroen Xantia</div>
        <div class="posts-cell">asdsd-457</div>
        <div class="posts-cell">Знак остановки</div>
        <div class="posts-cell">_Тут положение_</div>
        <div class="posts-cell">9027</div>
        <div class="posts-cell"><b>500</b>
            <input class="note" type="text" data-id="9027" placeholder="Ваш комментарий"/>
        </div>
        <div class="posts-cell">
           <span class="company-info-block">ООО...

CSS

body {
    font-size:12px;
}
a  {
    text-decoration: none;
}
.company-info-block {
	display: block;
}
.posts-table {
	display: table;
}
.posts-head-row {
	display: table-row;
	background-color: #0096cc;
	color: white;
	font-weight: bold;

}
.posts-cell {
	padding-left: 5px;
	padding-top: 5px;
}

.posts-row {
	color: rgb(51, 51, 51);
	display: table-row;
}
.posts-row:nth-child(even) {
	background: #ffffff
}
.posts-row:nth-child(odd) {
	background: #f3f3f3
}

.posts-row:hover {
	color: rgb(24, 24, 24);
	background-color: #d2edf0;
}
.posts-cell {
	display: table-cell;
}