JSFiddle - React, Tailwind, and code Playground

by HappyCougar

HTML

<link rel="stylesheet" href="http://vikupavto24.ru/templates/st/style.css">
<div id="go_to_calc">
    <h1 id="go_to_calc_main_p">Онлайн калькулятор доставки автомобиля</h1>
    <p id="go_to_calc_red_p">Хочешь знать, сколько будет стоить машина твоей мечты в России? Рассчитай цену прямо сейчас!</p>
    <a href="http://vikupavto24.ru/mashiny-iz-evropy">
        <div id="go_calc_button">
            <div id="go_calc_button_tri">
            </div>
        </div>
    </a>
</div>
<div id="calc_how_to_use">
    <h2>Как это работает?</h2>
    <ul>
        <li>Найди свой автомобиль на сайте <img src="http://vikupavto24.ru/images/mobilede.gif" alt="mobile.de авто из германии" title="mobile.de авто из германии"/></li>
        <li>Скопируй ссылку на объявление в  поле расположенное ниже </li>
        <li>Нажми кнопку «Рассчитать»</li>
    </ul>
</div>

CSS

body {
    width:685px;    
}
#go_to_calc {
    background: #B8E1F5;
    padding: 20px;
    color: #646464;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin:20px 0px;
    position:relative;
    -webkit-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.75);
}
#go_to_calc_main_p {
    font-size: 21px;
    color: #646464;
    margin-bottom:15px;
}
#go_calc_button {
    background: #EF7C00;
    position: absolute;
    height: 70px;
    width: 70px;
    right: 10px;
    top: 12px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #A87A05;
    cursor:pointer;
}
#go_calc_button_tri {
    width: 0px;
    height: 0px;
    border-top: 20px solid rgba(0, 0, 0, 0);
    border-bottom: 20px solid rgba(0, 0, 0, 0);
    border-left: 25px solid #B8E1F5;
    position: absolute;
    top: 15px;
    left: 25px;
}
#calc_how_to_use {
background: #B8E1F5;
padding: 20px;
color: #646464;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 20px 0px;
position: relative;
}
#calc_how_to_use ul {
    margin: 15px 10px;
}
#calc_how_to_use li {
    font-size: 17px;
    margin: 10px 0;
    list-style: none;
    background: url("http://vikupavto24.ru/images/pocket_circle-16.png")0px 2px no-repeat;
    padding-left: 25px;
}
#calc_how_to_use img {
    position: absolute;
    margin-top: -3px;
    margin-left: 5px;
    cursor:pointer;
}