JSFiddle - React, Tailwind, and code Playground

by tebrown

HTML

<div style="padding:50px;min-width:780px;border:1px solid #ccc;height:300px;">

<div class="block-1-container">

<div class="block-1-heading">Block 1</div>
<div class="block-1-text">Lorem ipsum dolor sit amet, fsdffdsdsfdf sddfsdf dconsectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="block-1-button">Block 1 Button</div>

</div>

<div class="block-2-container">

<div class="block-2-heading">Block 2</div>
<div class="block-2-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="block-2-button">Block 2 Button</div>

</div>

<div class="block-3-container">

<div class="block-3-heading">Block 3</div>
<div class="block-3-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="block-3-button">Block 3 Button</div>

</div>

</div>

CSS

.block-1-container { float:left;width:235px;max-width:235px;margin-right: 35px; }
.block-1-heading { font-size:20px; font-weight: none; color: #3ebca4;padding-bottom:10px; }
.block-1-text {height:100px; }
.block-1-button { background-color: #f2f2f2; color:#666; border-radius: 10px; padding-top: 8px; padding-bottom:8px; text-align:center; }


.block-2-container { float:left;width:235px;margin-right: 35px; }
.block-2-heading { font-size:20px; font-weight: none; color: #3ebca4;padding-bottom:10px; }
.block-2-text {height:100px; }
.block-2-button { background-color: #f2f2f2; color:#666; border-radius: 10px; padding-top: 8px; padding-bottom:8px; text-align:center; }


.block-3-container { float:left;width:235px; }
.block-3-heading { font-size:20px; font-weight: none; color: #3ebca4;padding-bottom:10px; }
.block-3-text {height:100px; }
.block-3-button { background-color: #f2f2f2; color:#666; border-radius: 10px; padding-top: 8px; padding-bottom:8px; text-align:center; }

JavaScript

$(".block-1-container").hover(function () {
     $(".block-1-container").css("background-color", "#f3faf7");
	 $(".block-1-container").css("padding", "10px");
	 $(".block-1-container").css("clear", "both");
	 $(".block-1-button").css("background-color", "#40bda4");
	 $(".block-1-button").css("color", "#fff");
 });