JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<div class="content">
    
    <div class="hutCard">
        
        
        <div class="hutCardHeader">
            
            <div class="hutSmallLogoContainer">
            </div>
            
            <div class="hutHeadingContainer">
                <h3 class="hutHeaderText">Hello there</h3>
            </div>


            
        </div>
        
        <div class="hutCardBody">
            <div class="hutBodyContent">
                <span class="genText">This is an email notifying you of your eviction.
                
                </span>
            </div>
            <br />
            <div class="hutBodyContent">
                <span class="genText">
                    really friendly right?
                </span>
            </div>
            
        </div>
        
        <div class="hutCardFooter">
            <span class="footText">zetta<sup>&copy</sup></span>
        </div>
        
        
    </div>
    
</div>

CSS

body
{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

*
{
    font-family: Helvetica, Verdana, sans-serif; 

    
}

.content
{
    width:100%;
    height:100%;
    background:#ddd;
}

.hutCard
{
    width:70%;
    height:95%;
    min-height:400px;
    min-width:300px;
    max-height:450px;
    max-width:420px;
    padding:5px;
    box-sizing:border-box;
    margin-right:auto;
    margin-left:auto;
    border-radius:8px;
    background:white;
    border:1px solid rgb(240,240,240);
    
}

.hutCardHeader
{
    width:100%;
    min-height:90px;
    box-sizing:border-box;
    position:relative;
    border-bottom:5px solid rgb(126,236,86);
}

.hutSmallLogoContainer
{
    width:120px;
    height:30px;
    background:cornflowerblue;
    float:left;
}

.hutHeadingContainer
{
    width:100%;
    height:auto;
    text-align:center;
    clear:both;
    margin-top:10px;
    box-sizing:border-box;
}
.hutHeaderText
{
    color:#313131;
}

.hutCardBody
{
    width:100%;
    box-sizing:border-box;
    min-height:250px;
    height:calc(100% - 120px);
    border-bottom:1px solid rgb(240,240,240);
}
.hutBodyContent
{
    width:100%;
    height:auto;
    box-sizing:border-box;
    padding:10px;
}

.hutCardFooter
{
    width:100%;
    height:30px;
    box-sizing:border-box;
    padding-left:10px;
    padding-top:5px;
    
}

.genText
{
   color:#777;
}

.footText
{
    color:#777;
    font-size:.9em;
}