JSFiddle - React, Tailwind, and code Playground

by HugeHugh

HTML

<div class="con">
    <div class="store-button">
        <img src="https://in.kato.im/4356b7738c070afe126dc9aa5d585cedcb7bdef750a197ba6cbd5910b518dd27/OW%20icon%20%402x%20-%20app%20store.png" width="57" height="57" />
        <div class="store-message">    
            <span>Available on the</span>
            <h3>App Store</h3>
        </div>
    </div>
    <div class="store-button">
        <img src="https://in.kato.im/e293ef94dec4aded3702d5a9b8d9c07c620874a810f98c555ea1d5b225eb0/OW%20icon%20%402x%20-%20google%20play.png" width="57" height="57" />
        <div class="store-message">
            <span>Available on</span>
            <h3>Google Play</h3>
        </div>
    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);
body {
    background: #ff4663;
    font-family: 'Source Sans Pro', sans-serif;
}
.con {
    text-align: center;
    padding: 30px 0 0;
}
.store-button {
    width: 182px;
    height: 91px;
    display: inline-block;
    text-align: left;
    position: relative;
    background: rgba(0,0,0,0.2);
    padding-left: 104px;
    cursor: pointer;
    font-size: 112.5%;
    line-height: 1em;
}
.store-message {
    display: table-cell;
    vertical-align: middle;
    color: white;
    height: 91px;
}
.store-button:first-child {
    margin-right: 30px;
}
.store-button img {
    opacity: 0.6;
    position: absolute;
    top: 15px;
    left: 25px;
}
.store-button span {
    opacity: 0.8;
}
.store-button h3 {
    margin: 7px 0 0;
}
.store-button:hover {
    background: rgba(0,0,0,0.1);
}