JSFiddle - React, Tailwind, and code Playground

by pleymo

HTML

<div class="module">                    
<a href="" class="spoiler_links">
    <div class="module-title">Программа 22 января<span style="margin-left: 30px; color: #999999;">(10:00 - 18:00)</span></div>             
</a>
    <div class="spoiler_body" style="text-align:justify">
        
        
         <table border="0">
           <tr>
                <td valign="top" width="980">
        
        
        
                    <img src="http://industryart.ru/forum/2b.jpg" style="MARGIN-RIGHT: 20px" align="left" width="200" height="140"/><strong>«Знакомство с каллиграфией»</strong>
        
        <p>Компания «ГАММА»</p>
        
        <p>Мастер: <img style="margin-right: 5px; margin-left: 5px;" src="http://www.artindustry.ru/i/info.gif" width="15"><span style="color: #3CABFF">Баранова Юлия</span> <span style="margin-left: 20px; color: red">(стол №)</span></p>
        
           <p style="margin-bottom: 20px;"><span class="small">Вводный мастер-класс по каллиграфии. Материалы: тушь, чернила.</span></p>
<p><a style="color: #ffffff;" href="" target="_blank" class="regred">Регистрация открыта</a><span style="margin-left: 200px;">Кол-во свободных мест: 0/10</span><a onclick="return up()" href="" style="margin-left: 200px;">К началу<img src="http://industryart.ru/forum/arrow_up.png" style="margin-left:10px;" width="30"></a></p>

                </td>
                
                <td width="20"></td>
                
                <td class="tdbg" valign="middle" align="center" width="120">
                    <div class="date"><p>22 января</p><p>10:00 – 12:00</p></div>
                </td>
                   </tr>
                    </table>
               
<hr><!-- КОНЕЦ < 1b > --><!-- КОНЕЦ < 1b > --><!-- КОНЕЦ < 1b > --><!-- КОНЕЦ < 1b > --><!-- КОНЕЦ < 1b > -->
        
        <table border="0">
            <tr>
                <td valign="top" width="980">
        
        
        
                    <img src="http://industryart.ru/forum/2.jpg"...

CSS

.spoiler_body {display:none;}
.spoiler_links {cursor:pointer;}

.module {
    margin: 0;
    padding: 5px 0;
}

.module .module-title {
    background-color: #FFFFFF;
    background-image: linear-gradient(to bottom, #69B9F3, #FFFFFF);
    background-repeat: repeat-x;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    font-size: 20px;
    font-weight: bold;
    line-height: 36px;
    margin-bottom: 10px;
    padding: 5px 0 5px 10px;
    color: #333333;
}

.tdbg {
    
    background-image: linear-gradient(to top, #69B9F3, #FFFFFF);
    
}

.date {
    font-size: 18px;
    font-weight: bold;
    padding: 10px;
        line-height: 36px;
    color: #333333;
}

.small {
    
font-size: 14px;   
    color: #999999;
}

.muted {
    color: #999999;
}
a {
    color: #333333;
    text-decoration: none;
}

.regred {
    background-image: linear-gradient(to bottom right, #e2e2e2 0%, red 30%, #F64D4D 70%, #e2e2e2 100%);
    background-color: red;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    font-size: 19px;
    font-weight: bold;
    line-height: 36px;
    margin-bottom: 10px;
    padding: 5px;
    color: #ffffff;
}

a.regred:hover {
 background-color: blue; 
     background-image: linear-gradient(to bottom right, green 40%, #ffffff 100%);
    }