<div class="card">
        <span class="card__img"></span>
        <div class="card__content">
            <ul class="card__list">
                <li class="card__item card__item--active">Adobe XD</li>
                <li class="card__item">Figma</li class="card__item">
                <li class="card__item">Sketch</li class="card__item">
            </ul>
            <p class="card__desc">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero atque iste nobis quidem dolore error animi voluptas quia corrupti consectetur.</p>
            <a class="card__link" href="#">Visit the link</a>
        </div>
    </div>

body, html {
    margin: 0;
    height: 100vh;
}
body {
    display: grid;
    place-content: center;
    height: 100vh;
    background: rgb(238, 238, 238);
    font-family: 'Nunito', sans-serif;
}

.card {
    padding: 0 5em;

    &__img {
      display: block;
      height: 100px;
      width: 100%;
      background: #e0466b;
    }

    &__content {
        padding: 1.5em;
        background: white;
    }

    &__list {
        list-style-type: none;
        display: flex;
        margin: 0;
        padding: 0;
    }

    &__item {
        padding: .3em .5em;
        margin-right: .5em;
        background: rgb(230, 230, 230);
        border-radius: .3em;
        font-size: .85em;

        &--active {
            background: #d4d4d4;
            font-weight: bold;
        }
    }

    &__link {
        background: #2c8973;
        color: white;
        text-decoration: none;
        padding: .5em 1em;
        border-radius: .5em;
        display: inline-block;
        margin-top: .5em;

        &:hover {
            background: #267764;
        }
    }


}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.