JSFiddle - React, Tailwind, and code Playground

by Radioactive

HTML

<div class="top_servers">
    <div class="top_block top_block_inf">
    <div class="top_block_name">
      <a href="{*url_site*}/pay/top">
        Место свободно
      </a>
    </div>
    <div class="top_block_maps top_block_infb">
      <img src="http://cs-boost.net/template/default/main/img/maps/cs16/Unknown.jpg">
    </div>
    <div class="top_block_inf_text">
    При размещении Вашего сервера в ТОП блоке - он отображается в верхней - наиболее просматриваемой части мониторинга, а также попадает в корневой set master
    </div>
    <div class="top_block_inip">
       <div class="top_block_inip top_block_infb_b top_block_infb_b_green"><a href="{*url_site*}/pay/top">Занять место</a></div>
    </div>
  </div>
  <!-- ============================= -->    
  <div class="top_block">
    <div class="top_block_name">
      <a href="http://cs-boost.net/server_info/?ip=83.222.104.186:27016" title="О сервере .::[Пушки Детям Не Игрушки]::.">
        .::[Пушки Детям Не Игрушки]::.
      </a>
    </div>
    <div class="top_block_maps">
      <img class="top_block_maps_img" src="http://cs-boost.net/template/default/main/img/maps/cs16/de_dust2x2.jpg">
      <div class="info_bl_m">
        <span>de_dust2x2</span>
				<span>0: 31 / 32</span>
      </div>
      <img class="info_bl_m_i_cs" src="http://cs-boost.net/template/default/main/img/icons/cs16.gif" width="16">
      <img class="info_bl_m_i_fl" src="http://cs-boost.net/template/default/main/img/flags/ru.gif" width="16">
    </div>
    <div class="top_block_inip">
      <input title="" onclick="this.select()" type="text" value="83.222.104.186:27016">
    </div>
  </div>
  <!-- ============================= -->    <div class="top_block">
    <div class="top_block_name">
      <a href="http://cs-boost.net/server_info/?ip=83.222.104.186:27016" title="О сервере .::[Пушки Детям Не Игрушки]::.">
        .::[Пушки Детям Не Игрушки]::.
      </a>
    </div>
    <div class="top_block_maps">
      <img class="top_block_maps_img"...

CSS

body{margin:0;padding:0;}
.top_servers{*display:flex;margin:1%;}
.top_block{display:inline-block;background:#fff;box-shadow:0 1px 3px #C7C7C7;padding:1%;margin:1%;width:20.3%;max-width:300px;*overflow:hidden;vertical-align:top;}
  .top_block_name{margin-bottom:5px;text-align:center;}
    .top_block_name a{text-decoration:blink;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;}
  .top_block_maps{position:relative;}
    .top_block_maps .top_block_maps_img{width:100%;height:auto;width:auto\9;}
    .top_block_maps img.info_bl_m_i_cs,
    .top_block_maps img.info_bl_m_i_fl{position:absolute;bottom:37px;}
    .top_block_maps img.info_bl_m_i_cs{left:5px;}
    .top_block_maps img.info_bl_m_i_fl{right:5px;}
    .info_bl_m{background:rgba(0,0,0,0.4);display:flex;justify-content:space-between;position:absolute;bottom:5px;left:0;right:0;color:#ddd;padding:5px 8px;white-space:nowrap;}
  .top_block_inip{}
    .top_block_inip input{font-size:1em;text-align:center;width:100%;background:none;border:none;padding:0;margin:0;color:#4A4A4A;}
   .top_block_inf{position:relative;}
   .top_block .top_block_infb{overflow:hidden;z-index:1;}
    .top_block .top_block_infb img{opacity:0;width:100%;}
    .top_block .top_block_inf_text{position:absolute;top:35px;right:10px;left:18px;bottom:45px;padding:0 5px 5px 0;overflow:auto;z-index:2;line-height:19px;text-align:justify;}
    
    .top_block .top_block_inf_text::-webkit-scrollbar-track{-moz-box-shadow:inset 0 0 1px rgba(0,0,0,0.3);-o-box-shadow:inset 0 0 1px rgba(0,0,0,0.3);background-color:#F5F5F5;-webkit-box-shadow:inset 0 0 1px rgba(0,0,0,0.3);box-shadow:inset 0 0 1px rgba(204,204,204,0.3);}
    .top_block .top_block_inf_text::-webkit-scrollbar{width:8px;background-color:#F5F5F5;}
    .top_block .top_block_inf_text::-webkit-scrollbar-thumb{background-color:#b1b1b1;}
    .top_block .top_block_inf_text::-webkit-scrollbar-thumb:hover{background-color:#555;}


   .top_block...