JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="card mb-4">
    <img class="card-img-top" src="https://ichef.bbci.co.uk/news/660/cpsprodpb/948D/production/_109592083_mediaitem109591445.jpg" alt="Card image cap">
    <div class="card-body">
        <h2 class="card-title">Funding For Bulbul</h2>
        <p class="card-text">
            The authorities in Bangladesh have ordered the evacuation of some 100,000 people from coastal areas as Cyclone Bulbul is set to hit the country.

            The storm - which is due to make landfall on Saturday evening local time - is expected to unleash surges as high as 7ft (two metres). 
        </p>
        <div class="d-flex align-items-center flex-wrap">
            <div class="">
                <a href="#" class="btn btn-primary">Read More &rarr;</a>
            </div>
            <!--Progress Bar-->
            <div class="flex-fill">
                <div class="container">

                    <div class="progress">
                        <div class="progress-bar"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card-footer text-muted">
        Posted on November 9 , 2019 by
        <a href="https://www.bbc.com/bengali">BBC Bangladesh</a>
    </div>
</div>