JSFiddle - React, Tailwind, and code Playground

by Vladimir Sobolev

HTML

<body>
    <div class="channel"> <a href="http://player.bonus-tv.ru/playurl?url=http://wpc.970A.edgecastcdn.net/80970A/HALO_Perviy/hls/hls_perviy/index.m3u8">
        <span class="channel_name">Первый</span>
        <img class="channel_logo" src="https://interface.iptv.beeline.ru/PHP/images/logos_224x158_id/28629.png">
    </a>

    </div>
    <div class="channel"> <a href="http://player.bonus-tv.ru/playurl?url=http://wpc.970A.edgecastcdn.net/80970A/HALO_Russia-1/hls/hls_russia-1/index.m3u8">
        <span class="channel_name">Россия 1</span>
        <img class="channel_logo" src="https://interface.iptv.beeline.ru/PHP/images/logos_224x158_id/28976.png">
    </a>

    </div>
    <div class="channel"> <a href="http://player.bonus-tv.ru/playurl?url=http://wpc.970A.edgecastcdn.net/80970A/HALO_Russia-2/hls/hls_russia-2/index.m3u8">
        <span class="channel_name">Россия 2</span>
        <img class="channel_logo" src="https://interface.iptv.beeline.ru/PHP/images/logos_224x158_id/28983.png">
    </a>

    </div>
    <div class="channel"> <a href="http://player.bonus-tv.ru/playurl?url=http://wpc.970A.edgecastcdn.net/80970A/HALO_NTV/hls/hls_ntv/index.m3u8">
        <span class="channel_name">НТВ</span>
        <img class="channel_logo" src="https://interface.iptv.beeline.ru/PHP/images/logos_224x158_id/28982.png">
    </a>

    </div>
    <div class="channel"> <a href="http://player.bonus-tv.ru/playurl?url=http://wpc.970A.edgecastcdn.net/80970A/HALO_5-kanal/hls/hls_5-kanal/index.m3u8">
        <span class="channel_name">5 канал</span>
        <img class="channel_logo" src="https://interface.iptv.beeline.ru/PHP/images/logos_224x158_id/29126.png">
    </a>

    </div>
    <div class="channel"> <a href="http://player.bonus-tv.ru/playurl?url=http://wpc.970A.edgecastcdn.net/80970A/HALO_Russia-K/hls/hls_russia-k/index.m3u8">
        <span class="channel_name">Россия К</span>
        <img class="channel_logo"...

CSS

body {
     background: #333;
 }
 a {
     color: #eee;
     text-decoration:none;
 }
 .channel {
     float: left;
     padding: 3px;
     width: 100px;
     height: 100px;
     text-align: center;
     border: 1px dashed #666;
     margin: 5px;
     border-radius:8px;
 }
 .channel_logo {
     float: left;
     max-width: 80px;
     max-height: 80px;
     margin:0 10px;
 }
 .channel_name {
     font-size: 10px;
     font-family: verdana;
     font-weight: bold;
 }