JSFiddle - React, Tailwind, and code Playground

HTML

<div id='' class='head'><span id='' class='big noselect'>Наноборда<span style='font-size:0.5em;'><sup>v1.3.5</sup></span></span><br/><a href='/'>[Главная]</a><a onclick="var x=new XMLHttpRequest();x.open('GET','/asmpng','true');x.send('');">[Создать PNG]</a><a href='/fresh'>[Свежие]</a><a onclick="var x=new XMLHttpRequest();x.open('GET','/aggregate','true');x.send('');">[Искать]</a><a href='/image' target='_blank'>[Img2Base64]</a><a href='/shutdown'>[Выключить]</a><div id='notif1' style='text-align:right;position:fixed;right:2%;top:10px;'></div></div><div id='' class='step'></div>

<div class="post main">
  <div class="postinner">
    Заглавный пост.
  </div>
  <div>
    <a>[Категории]</a>
  </div>
</div>

<div class="post">
  <div class="postinner">
    Пример
    <sp>спойлера</sp>,
    <g>метки времени</g>.
  </div>
  <div>
    <a>[Ответить]</a>
  </div>
</div>


<div class="post">
  <div class="postinner">
    Пример
    оченьдлиннойстрочкиоченьдлиннойстрочкиоченьдлиннойстрочкиоченьдлиннойстрочкиоченьдлиннойстрочкиоченьдлиннойстрочкиоченьдлиннойстрочкиоченьдлиннойстрочкиоченьдлиннойстрочкиоченьдлиннойстрочки
  </div>
  <div>
    <a>[Ответить]</a>
  </div>
</div>


<div class="post">
  <div class="postinner">
    Пример очень длинного текста.Пример очень длинного текста.Пример очень длинного текста.Пример очень длинного текста.Пример очень длинного текста.Пример очень длинного текста.Пример очень длинного текста.Пример очень длинного текста.Пример очень длинного текста.Пример очень длинного текста.Пример очень длинного текста.Пример очень длинного текста.Пример очень длинного текста.Пример очень длинного текста.Пример очень длинного текста.Пример очень длинного текста.Пример очень длинного текста.Пример очень длинного текста.Пример очень длинного текста.Пример очень длинного текста.Пример очень длинного текста.Пример очень длинного текста.Пример очень длинного текста.Пример очень длинного текста.Пример очень длинного текста.Пример очень длинного текста.Пример...

CSS

body {
  font-family: 'Trebuchet MS', Trebuchet, sans-serif;
  background: #eee;
  line-height: 1.3em;
  font-size: 0.9em;
  overflow-x: hidden;
}

a {
  color: salmon;
  text-decoration: none;
  cursor: pointer;
  margin: 0 0.2em;
}

sp {
  text-decoration: none;
  color: #bbb;
  background: #bbb;
}

g {
  color: green;
}

sp:hover {
  background: #ddd;
  color: #333;
}

a:hover {
  color: darkorange;
  text-decoration: underline;
}

.postinner {
  max-height: 48em;
  overflow: auto;
  max-width: 600px;
  margin-bottom: .5em;
}

.post {
  width: auto;
  border: 1px solid #ccc;
  border-radius: .5em;
  display: inline-block;
  white-space: wrap;
  background: #ddd;
  color: #333;
  margin: 0.25em;
  float: left;
  clear: both;
  padding: 0.7em;
}

img {
  max-width: 100px;
  max-height: 100px;
}

.fullimg {
  max-width: 100%;
  max-height: 100%;
}

.main {
  background: white;
}

div {
  display: inline-block;
  clear: both;
  float: left;
}

.head {
  background: #654;
  color: salmon;
  padding: 1em;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}

.step {
  height: 5em;
}

.big {
  font-size: 2em;
}

textarea {
  font-size: 0.9em;
  width: 32em;
  height: 22em;
}

button {
  font-size: 0.9em;
}