JSFiddle - React, Tailwind, and code Playground

by hslincoln

HTML

<!-- Dialogs -->
<div class="kitchendialog">
    <div class="gochefcontent">
        <div id="title">
            <p>Go Chef</p>
        </div>
        <div id="description">
            <p>Blah blah blahblah blah blah blah blah blah blah blah blah blah blahblahblahblahblahblahblahblahblahblahblahblahblahblahblah blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblah</p>
        </div>
        <div class="priceDetails">
            <p class="price">£69.99</p>
        </div>
        <div id="moreinfowrapper"> <a href="http://www.jmldirect.com/uk/cooking+baking/gochef/invt/g0bgs20100000001" target="_blank"><div class="button"></div></a>

        </div>
    </div>
</div>

CSS

.kitchendialog {
    background-color: rgba(163, 154, 77, 0.9);
    border-radius: 170px 170px 170px 170px;
    color: #FFFFFF;
    display: none;
    height: 140px;
    left: 274px;
    line-height: 24px;
    padding: 100px 30px;
    position: absolute;
    text-align: center;
    top: 57px;
    width: 280px;
    z-index: 10;
}
.gochefcontent {
    display:none;
}
.kitchendialog .gochefcontent {
    width:170px;
    height:220px;
    display:block;
}
.kithendialog .gochefcontent #title, #description, #pricedetails, #moreinfowrapper {
    display:inline-block;
    width:170px;
    height:60px;
}
.kitchendialog .gochefcontent #title p {
    font-size: 1.6em;
    color:#ffffff;
    text-align:center;
    margin:0;
}
.kitchendialog .gochefcontent #description p {
    font-size: 0.958em;
    color:#7E7E7E;
    text-align:left;
}
.kitchendialog .gochefcontent #priceDetails p.price {
    font-size:1.2em;
    text-decoration:italic;
    text-align:left;
    margin-left:5px;
}
.kitchendialog .gochefcontent #moreinfowrapper .button {
    background:url('../images/social_icons/elements.png') -540px -192px no-repeat scroll;
    display:block;
    position:absolute;
    width:91px;
    height:24px;
}
.kitchendialog .gochefcontent #moreinfowrapper .button:hover {
    background-position: -448px -192px;
}

JavaScript

//go chef javascript

jQuery(document).ready(function () {
    jQuery('.label1').click(function () {
        jQuery(this).data('clicked');
        jQuery('.gochefcontent').fadeIn("slow", function () {});
    });
});