JSFiddle - React, Tailwind, and code Playground

by avanesov89

HTML

<div id="wrapper">
    <div class="info"><div class="left">
				<div class="title">О нас говорят</div>
				<div class="content">
					<p>Данная модель отлично подошла для увеличения производственности погрузчиков<span>Иван, ООО "Компания"</span></p>
				<p>Данная модель отлично подошла для увеличения производственности погрузчиков<span>Иван, ООО "Компания"</span></p>
				<p>Данная модель отлично подошла для увеличения производственности погрузчиков<span>Иван, ООО "Компания"</span></p>
				</div>
				<div class="all">
					Все новости <a class="hider">Ссылка</a> 
<div id="hidden" class="forma" style="display: none;">
Для нас важно знать ваше мнение

<form onsubmit="return sendForm('10');" id="buyform10">
					<input type="text" name="name" placeholder="Ваше имя">
					<textarea type="text" name="name" placeholder="Ваше сообщение"></textarea>
					<button>Отправить</button>
				</form>
				
				</div>
				</div>
			</div></div></div>

CSS

#wrapper .info {width:1240px;margin:50px auto;height:900px;}
#wrapper .info img {display:block;margin:0 auto;}
#wrapper .info a {color:#cc3333;font-style:italic;font-size:14px;}
#wrapper .info a:hover {text-decoration:underline;}
#wrapper .info form {margin:0 auto;width:250px;}
#wrapper .info input {background:#fff;height: 35px;width:190px;border:none;padding-left:10px;font: 300 20px/24px'Open Sans condensed',sans-serif;color:#1b3647;margin:10px 0;}
#wrapper .info textarea {width:240px;border:none;padding-left:10px;font: 300 20px/24px'Open Sans condensed',sans-serif;color:#1b3647;margin:10px 0;height:150px;}
#wrapper .info button {background:#cc3333;border:none;text-align: center;height:35px;font:300 20px/20px'Open Sans',sans-serif;color:#fff;padding:0 5px;cursor:pointer;}
#wrapper .info .title {font-size:22px;line-height:34px;padding-left:10px;}
#wrapper .info .content {height:272px;color:#1b3647;font-size:14px;padding:10px;}
#wrapper .info .all {height:20px;color:#fff;padding:5px 10px;font-size:14px;}
#wrapper .info .all a {color:#fff;float:right;cursor:pointer;}
#wrapper .info span {display:block;}
#wrapper .info .all .forma {background:#1B3647;height:292px;left:-10px;position:relative;top:-317px;width:380px;}
#wrapper .info .left {height:365px;width:380px;float:left;}
#wrapper .info .left .title {color:#d06503;border-bottom:7px solid #d06503;}
#wrapper .info .left .content p {border-bottom:1px solid #d06503;padding: 10px 0;}
#wrapper .info .left .content p span {display:block;font-size:16px;text-align:right;}
#wrapper .info .left .all {background:#d06503;}
#wrapper .info .left .all span {float:right;}

JavaScript

$(document).ready(function(){
    $(".hider").click(function(){
        $("#hidden").slideToggle("slow");
        return false;
    });
});