<div class="card bg-white border-0 rounded-3 mb-4">
        <div class="card-body p-4">
            <div class="mb-4">
                <span class="badge bg-primary bg-opacity-50 rounded-1 text-dark py-2 px-3 fs-13 fw-medium">Primary</span>
                <span class="badge bg-success bg-opacity-50 rounded-1 text-dark py-2 px-3 fs-13 fw-medium">Success</span>
            </div>
            <h3 class="mb-3 fs-16 fw-semibold">Nesta Technologies</h3>
            <p class="mb-20">When you enter into any new area of science, you almost always find.</p>
            <a href="#" class="btn btn-primary py-2 px-4 bg-primary bg-opacity-10 fw-semibold text-primary border-0 hover-bg">
                View Details
            </a>
        </div>
    </div>
    
    

    
    <div class="card bg-white border-0 rounded-3 mb-4">
        <div class="card-body p-4">
            <div class="mb-4">
                <span class="badge bg-primary bg-opacity-50 rounded-1 text-dark py-2 px-3 fs-13 fw-medium">Primary</span>
                <span class="badge bg-success bg-opacity-50 rounded-1 text-dark py-2 px-3 fs-13 fw-medium">Success</span>
            </div>
            <h3 class="mb-3 fs-16 fw-semibold">Nesta Technologies</h3>
            <p class="mb-20">When you enter into any new area of science, you almost always find.</p>
            <a href="#" class="btn btn-primary py-2 px-4 bg-primary bg-opacity-10 fw-semibold text-primary border-0 hover-bg">
                View Details
            </a>
        </div>
    </div>
    
    

    
    <div class="card bg-white border-0 rounded-3 mb-4">
        <div class="card-body p-4">
            <div class="mb-4">
                <span class="badge bg-primary bg-opacity-50 rounded-1 text-dark py-2 px-3 fs-13 fw-medium">Primary</span>
                <span class="badge bg-success bg-opacity-50 rounded-1 text-dark py-2 px-3 fs-13 fw-medium">Success</span>
            </div>
            <h3 class="mb-3 fs-16 fw-semibold">Nesta Technologies</h3>
            <p class="mb-20">When you enter into any new area of science, you almost always find.</p>
            <a href="#" class="btn btn-primary py-2 px-4 bg-primary bg-opacity-10 fw-semibold text-primary border-0 hover-bg">
                View Details
            </a>
        </div>
    </div>
    
    

    
    <div class="card bg-white border-0 rounded-3 mb-4">
        <div class="card-body p-4">
            <div class="mb-4">
                <span class="badge bg-primary bg-opacity-50 rounded-1 text-dark py-2 px-3 fs-13 fw-medium">Primary</span>
                <span class="badge bg-success bg-opacity-50 rounded-1 text-dark py-2 px-3 fs-13 fw-medium">Success</span>
            </div>
            <h3 class="mb-3 fs-16 fw-semibold">Nesta Technologies</h3>
            <p class="mb-20">When you enter into any new area of science, you almost always find.</p>
            <a href="#" class="btn btn-primary py-2 px-4 bg-primary bg-opacity-10 fw-semibold text-primary border-0 hover-bg">
                View Details
            </a>
        </div>
    </div>
    
    

    
    <div class="card bg-white border-0 rounded-3 mb-4">
        <div class="card-body p-4">
            <div class="mb-4">
                <span class="badge bg-primary bg-opacity-50 rounded-1 text-dark py-2 px-3 fs-13 fw-medium">Primary</span>
                <span class="badge bg-success bg-opacity-50 rounded-1 text-dark py-2 px-3 fs-13 fw-medium">Success</span>
            </div>
            <img src="assets/images/card-1.jpg" class="mb-4 rounded-3" alt="card">
            <h3 class="mb-3 fs-16 fw-semibold">Nesta Technologies</h3>
            <p class="mb-20">When you enter into any new area of science, you almost always find.</p>
            <a href="#" class="btn btn-primary py-2 px-4 bg-primary bg-opacity-10 fw-semibold text-primary border-0 hover-bg">
                View Details
            </a>
        </div>
    </div>
    
    

    
    <div class="card text-bg-dark border-0 rounded-3">
        <img src="assets/images/card-2.jpg" class="card-img" alt="card">
        <div class="position-absolute top-0 p-3">
            <span class="badge bg-primary rounded-1 text-dark py-2 px-3 fs-13 fw-medium">Primary</span>
            <span class="badge bg-warning rounded-1 text-dark py-2 px-3 fs-13 fw-medium">Warning</span>
            <span class="badge bg-success rounded-1 text-dark py-2 px-3 fs-13 fw-medium">Success</span>
        </div>
        <div class="card-img-overlay" style="top: auto; bottom: 0;">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small>Last updated 3 mins ago</small></p>
        </div>
    </div>
    
    

    
    <div class="card bg-white">
        <div class="card-header fs-16 fw-semibold">
            Featured
        </div>
        <ul class="list-group list-group-flush">
            <li class="list-group-item">An item</li>
            <li class="list-group-item">A second item</li>
            <li class="list-group-item">A third item</li>
        </ul>
    </div>