JSFiddle - React, Tailwind, and code Playground

by David Nabb

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="ap-fg-gtg">
    <div class="ap-logo">
        <img src="http://www.goodthymegourmet.com.au/wp-content/uploads/2015/10/The-Artisan-Pantry.png" alt="The Artisan Pantry">
    </div>
    <div class="plus">
        <img src="http://www.goodthymegourmet.com.au/wp-content/uploads/2015/10/Plus.png" alt="Plus">
    </div>
    <div class="fg-logo">
        <img src="http://www.goodthymegourmet.com.au/wp-content/uploads/2015/10/Firegreen-Foods-Logo-No-Background.png" height="220" alt="Firegreen Foods">
    </div>
    <div class="equals">
        <img src="http://www.goodthymegourmet.com.au/wp-content/uploads/2015/10/Equals.png" alt="Equals">
    </div>
    <div class="gtg-logo">
        <img src="http://www.goodthymegourmet.com.au/wp-content/uploads/2015/10/Good-Thyme-Gourmet-Logo.png" alt="Good Thyme Gourmet">
    </div>
</div>

CSS

.ap-fg-gtg {
    padding-left: 15%;
    padding-top: 20%;
    height: 100vh;
    background-color: #fff;
    background-image: url("http://www.goodthymegourmet.com.au/wp-content/uploads/2015/09/Quinoa-Cutlets-with-Beetroot-Hummus.jpg");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top;
    background-attachment: fixed;
}
.ap-logo, .plus, .fg-logo, .equals, .gtg-logo {
    display: inline;
}
.ap-logo img, .fg-logo img, .gtg-logo img {
    width: 20%;
    height: auto;
    border-radius: 20px;
    text-align: center;
    vertical-align: middle;
    margin-top: 0;
}
.plus img, .equals img {
    width: 10%;
    height: auto;
    text-align: center;
    vertical-align: middle;
    margin-top: 0;
}
.ap-logo img {
    background-color: #000;
}
.fg-logo img {
    background-color: #2d1108;
}