JSFiddle - React, Tailwind, and code Playground

by ajobi

HTML

<div class="bookmark-container">
    <div class="bookmark-set">
        <div class="bookmark-title">Daily</div>
        <div class="bookmark-inner-container">
            <a class="bookmark" href="https://inbox.google.com/"><img src="https://ssl.gstatic.com/ui/v1/icons/mail/images/favicon5.ico"/>Inbox</a>
        </div>
    </div>

CSS

.bookmark-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 50%;
    margin: 1em 0em;
}

.bookmark-set{
    padding: 1em;
    background-color: #322441;
    font-family: "Roboto";
    font-size: .85em;
    width: 25%;
    height: auto;
    margin: 0em .5em;
}

.bookmark-inner-container {
    height: 80%;
    vertical-align: top;
}

.bookmark-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    margin: 0em 0em .35em 0em;
}

.bookmark {
    color: #fff;
    display: block;
    margin: .5em 0em;
    display: flex;
    align-items: center;
}

img {
    max-height: .9rem;
    margin-right: 6px;
}