JSFiddle - React, Tailwind, and code Playground

by evan

HTML

<div class="disclosable">
    <div class="disclosable-icon"></div>
    <div class="disclosable-inner">
        <p class="heading">List your expenses</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus fringilla mi, at vestibulum magna porta ac. Sed a iaculis magna. Quisque enim dui, accumsan non turpis ac, tincidunt placerat libero. Aliquam nec augue sed diam vehicula cursus. Nam eu turpis at enim mattis varius. Suspendisse laoreet est vitae felis congue.</p>
    </div>
</div>

<br /><br /><br /><br />

<div class="disclosable">
    <div class="disclosable-icon"></div>
    <div class="disclosable-inner">
        <p class="heading">List your expenses</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus fringilla mi, at vestibulum magna porta ac. Sed a iaculis magna. Quisque enim dui, accumsan non turpis ac, tincidunt placerat libero. Aliquam nec augue sed diam vehicula cursus. Nam eu turpis at enim mattis varius. Suspendisse laoreet est vitae felis congue.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus fringilla mi, at vestibulum magna porta ac. Sed a iaculis magna. Quisque enim dui, accumsan non turpis ac, tincidunt placerat libero. Aliquam nec augue sed diam vehicula cursus. Nam eu turpis at enim mattis varius. Suspendisse laoreet est vitae felis congue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus fringilla mi, at vestibulum magna porta ac. Sed a iaculis magna. Quisque enim dui, accumsan non turpis ac, tincidunt placerat libero. Aliquam nec augue sed diam vehicula cursus. Nam eu turpis at enim mattis varius. Suspendisse laoreet est vitae felis congue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus fringilla mi, at vestibulum magna porta ac. Sed a iaculis magna. Quisque enim dui, accumsan non turpis ac, tincidunt placerat libero. Aliquam nec augue sed diam vehicula cursus. Nam eu turpis at enim mattis varius....

CSS

body {
    width: 960px;
    padding: 30px;
}

.disclosable {
    background-color: #a4619f;
    border-radius: 3px 30px 30px 3px;
    position: relative;
    font-family: 'Open Sans', sans-serif;
    line-height: 22px;
}

.disclosable-icon {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 22px;
    left: 8px;
}

.disclosable-inner {
    margin-left: 30px;
    padding: 21px;
    background: white;
    
    border-top: 1px solid #d5dbe1;
    border-right: 1px solid #d5dbe1;
    border-bottom: 1px solid #d5dbe1;
 
    border-radius: 0 3px 3px 0;
    
    overflow: hidden;


}

.disclosable p.heading {
    margin: 0;
    font-size: 18px;
}

.disclosable p {
    margin-bottom: 0;
    font-size: 14px;
}



/* obviously this would be an image */
.disclosable-icon {
    background-repeat: no-repeat;
    background-position: top left;
    background-image:...