JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<div class="main">
            <div class="procedure-box">
                <h3 class="header">Header - Some long text goes here for example this one lorem ipsum</h3>
                <p class="content-body">Detailed information about the can be found at the link below.</p>
                <div class="position-btns">
                    <a target="_blank" href="#"><button type="button" class="btn btn-green btn-proc">Visit web location</button></a>
                </div>
            </div>
        </div>

CSS

.main {
        text-align: center;
    }
    .procedure-box {
        border: 1px solid #ada9a9;
        display:flex;
        flex-direction:column;
        height: 350px;
        width: 300px;
        margin-right: 15px;
    }
    .header {
        text-align: left;
        margin-left: 15px;
        margin-right: 15px;
    }
    .content-body {
        text-align: left;
        margin-left: 15px;
        margin-right: 15px;
        flex:1;
    }
    .footer{

    }
    .position-btns {
        margin: 15px;
    }
    .btn-proc {
        /*position: relative;
        left: 20px;
        bottom: -20px;*/
    }
    .btn.btn-green {
        background: #438E29;
        padding: 12px 20px;
        color: #fff;
        border: none;
        cursor: pointer;
    }