<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container mt-5 mb-3"> <div class="row"> <div class="col-md-4"> <div class="card p-3 mb-2"> <div class="d-flex justify-content-between"> <div class="d-flex flex-row align-items-center"> <div class="icon"> <i class="bx bxl-mailchimp"></i> </div> <div class="ms-2 c-details"> <h6 class="mb-0">Mailchimp</h6> <span>1 days ago</span> </div> </div> <div class="badge"> <span>Design</span> </div> </div> <div class="mt-5"> <h3 class="heading">Senior Product<br>Designer-Singapore</h3> <div class="mt-5"> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="mt-3"> <span class="text1">32 Applied <span class="text2">of 50 capacity</span></span> </div> </div> </div> </div> </div> <div class="col-md-4"> <div class="card p-3 mb-2"> <div class="d-flex justify-content-between"> <div class="d-flex flex-row align-items-center"> <div class="icon"> <i class="bx bxl-dribbble"></i> </div> <div class="ms-2 c-details"> <h6 class="mb-0">Dribbble</h6> <span>4 days ago</span> </div> </div> <div class="badge"> <span>Product</span> </div> </div> <div class="mt-5"> <h3 class="heading">Junior Product<br>Designer-Singapore</h3> <div class="mt-5"> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="mt-3"> <span class="text1">42 Applied <span class="text2">of 70 capacity</span></span> </div> </div> </div> </div> </div> <div class="col-md-4"> <div class="card p-3 mb-2"> <div class="d-flex justify-content-between"> <div class="d-flex flex-row align-items-center"> <div class="icon"> <i class="bx bxl-reddit"></i> </div> <div class="ms-2 c-details"> <h6 class="mb-0">Reddit</h6> <span>2 days ago</span> </div> </div> <div class="badge"> <span>Design</span> </div> </div> <div class="mt-5"> <h3 class="heading">Software Architect <br>Java - USA</h3> <div class="mt-5"> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="mt-3"> <span class="text1">52 Applied <span class="text2">of 100 capacity</span></span> </div> </div> </div> </div> </div> </div> </div>

body { background-color: #eee } .card { border: none; border-radius: 10px } .c-details span { font-weight: 300; font-size: 13px } .icon { width: 50px; height: 50px; background-color: #eee; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 39px } .badge span { background-color: #fffbec; width: 60px; height: 25px; padding-bottom: 3px; border-radius: 5px; display: flex; color: #fed85d; justify-content: center; align-items: center } .progress { height: 10px; border-radius: 10px } .progress div { background-color: red } .text1 { font-size: 14px; font-weight: 600 } .text2 { color: #a5aec0 }