JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<article id="paajaf">
            <div class="paajaf-row">
                <h1 class="paajaf-title">Help Underprivileged Children Receive Education</h1>
            </div>

            <div class="paajaf-row">
                <img class="paajaf-heroShot" src="https://lh4.googleusercontent.com/-b1mSnAlMGAQ/UH3faumoFJI/AAAAAAAAAFg/N9-TXs3tVAA/s176/image.jpeg" />
            </div>

            <div class="paajaf-row">
                <button class="paajaf-ctaBtn">Help Now</button>
            </div>

            <div class="paajaf-row w-poweredBy">
                <p class="paajaf-poweredText">Powered by</p>
                <div class="paajaf-logo"></div>
            </div>
        </article>

CSS

#paajaf {
    max-width: 189px;
    border: 1px solid rgb(201, 201, 201);
    border-radius: 1PX;

    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    background: rgb(241, 241, 241);
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
    font-weight: 300;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

#paajaf .paajaf-row {
    padding: 10px 16px;
    border-bottom: 1px solid rgb(209, 209, 209);

    -webkit-box-shadow: 0 1px #fff;
    box-shadow: 0 1px #fff;
}

#paajaf .paajaf-row:last-child {
    border-bottom: 0;

    -webkit-box-shadow: none;
    box-shadow: none;
}

#paajaf .paajaf-title {
    margin: 0;
    font-size: 15px;
    font-weight: bold;
    color: rgb(133, 134, 134);
    text-shadow: 0 1px #fff;
}

#paajaf .paajaf-heroShot {
    width: 99%;
    border: 1px solid rgb(95, 95, 95);
}

#paajaf .paajaf-ctaBtn {
    width: 100%;
    padding: 5px 2px 6px;
    border: 0;

    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.32);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.32);
    border-radius: 2px;

    background-image: -webkit-linear-gradient(top, rgb(90, 182, 250) 0%,#2e76cf 100%);
    background-image: -moz-linear-gradient(top, rgb(90, 182, 250) 0%,#2e76cf 100%);
    background-image: -o-linear-gradient(top, rgb(90, 182, 250) 0%,#2e76cf 100%);
    background-image: -ms-linear-gradient(top, rgb(90, 182, 250) 0%,#2e76cf 100%);
    background-image: linear-gradient(top, rgb(90, 182, 250) 0%,#2e76cf 100%);
    font-size: 12px;
    font-weight: bold;
    color: rgb(255, 255, 255);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.46);
    cursor: pointer;
}

#paajaf .paajaf-ctaBtn:hover {
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.32), inset 0 0 0 20px rgba(255, 255, 255, 0.12);
    box-shadow: 0 1px 1px rgba(0, 0, 0,...