JSFiddle - React, Tailwind, and code Playground

by Matt Hopkins

HTML

<div id="leftWrapper">
    <div id="navigation">
        <a href="<?php ?>">
            <div id="previousImage" class="navButton">&lt;</div>
        </a>
        
        <div id="findImage">
            <input type="text">
        </div>
			
        <a href="<?php ?>">
            <div id="nextImage" class="navButton">&gt;</div>
        </a>
    </div>
</div>

CSS

@import url("http://meyerweb.com/eric/tools/css/reset/reset.css");

#leftWrapper {
	float:left;
}

#leftWrapper {
	width:40%;
	background-color: red;
}

#navigation {
	padding-top: 0px;
	width: 300px;
	margin:0 auto;
	height: 40px;
	line-height: 40px;
	background-color: #bada55;
}

#navigation * {
	display: inline-block;
	text-align: center;
	font-size: 20px;
	font-weight: bolder;
    vertical-align: top;
}

#findImage {
	width: 212px;
}

#findImage input {
    width:100%;
    height:28px;
    padding: 0;
    vertical-align: middle;
    border: 2px inset;
    margin-left:-2px;
}

.navButton {
	height: 40px;
	width:40px;
	line-height: 40px;
}