JSFiddle - React, Tailwind, and code Playground

by jimousse

HTML

<div class="container-fluid top-bar">

    <div class="d-flex justify-content-around">
        <div class="d-flex innerbar justify-content-between">
            <h4 class="text-light m-1 p-2 font-weight-bold">PC Sales App</h4>

            <div class="arrow"></div>
        </div>
    </div>

    <div class="d-flex justify-content-around">
        <div class="d-flex p-2 justify-content-center">
            <input id="slider" type="text"/><br/>
        </div>
    </div>

    <div class="d-flex justify-content-around">
        <div class="d-flex justify-content-center align-items-start">
            <div class="text-light p-2 lowbound">$0</div>
            <div class="text-light p-2 ml-4">to</div>
            <div class="text-light p-2 ml-4 upbound">$3000</div>
        </div>
    </div>

    <div class="d-flex justify-content-around">
        <div class="d-flex flex-wrap justify-content-center buttons">
        </div>
    </div>

</div>

CSS

.top-bar {
	display: flex;
	flex-direction:column;
	top:0;
	height: 4em;
	overflow: hidden;
	transition: all .3s ease;
}

.top-bar.expand {
	height: 38em;
}

.innerbar{
	justify-content: space-between;
}