JSFiddle - React, Tailwind, and code Playground

by bumbay

CSS

.hf-ads{font:8pt Tahoma;background:#E75A4D;width:428px;color:#FFD8D8;font-size:14px;padding:15px 20px;border:1px solid #A80E00;display:block;text-decoration:none;overflow:hidden;position:relative;margin:20px 10px;-webkit-box-shadow:0 3px 2px rgba(0,0,0,.1);-moz-box-shadow:0 3px 2px rgba(0,0,0,.1);box-shadow:0 3px 2px rgba(0,0,0,.1)}.hf-ads:hover{cursor:pointer}.hf-left img{padding-right:20px}.hf-left{float:left}.hf-name{color:#FFF;padding:0 0 8px}.hf-desc{font-size:9pt;line-height:1.5}.hf-video{padding-top:20px;font-size:9pt}.hf-video a{color:#fff;text-decoration:none}.hf-video a:hover{text-decoration:underline}.hf-btn{width:220px;padding:8px;font:300 14px Tahoma;background-color:#FFF;color:#000;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.5);-moz-box-shadow:0 1px 2px rgba(0,0,0,.5);box-shadow:0 1px 2px rgba(0,0,0,.5);border:none;display:inline-block;margin-right:15px}.hf-btn:hover{cursor:pointer;opacity:.8}.hf-btn:active{padding:9px 7px 7px 9px;opacity:.9}.hf-button{margin-top:10px}

JavaScript

$('.hf-btn').animate({color: '#FFF',backgroundColor: '#E75A4D'}, 3000);