JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<div class="inputs">
	<input type="text" class="input one">
	<input type="text" class="input two">
	<textarea name="textarea" id="textarea" cols="30" rows="3" class="input three"></textarea>	
</div>


<div class="ez-thumb">
	<div class="ez-thumb__list-wrapper">
		<ul class="ez-thumb__list ez-thumb__services">
			<li class="ez-thumb__item">
				<button class="ez-thumb__button ez-thumb__service">V</button>
			</li>
			<li class="ez-thumb__item">
				<button class="ez-thumb__button ez-thumb__service">S</button>
			</li>
			<li class="ez-thumb__item">
				<button class="ez-thumb__button ez-thumb__close">S</button>
			</li>
		</ul>
	</div>
</div>

SCSS

.inputs {
	display: flex;
	flex-direction: column;
	padding: 1rem;
}

.input {
	margin: 0 0 1rem;
}

.ez-thumb {
	display: inline-block;
	&#{__list-wrapper} {
		border: thin solid rgba(0,0,0,0.38);
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		overflow: hidden;
	}
	&#{__list} {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		margin: 0;
		padding: 0;
	}
	&#{__item} {
		display: inline-block;
	}
	&#{__button} {
		background-color: transparent;
		border: none;
		height: 48px;
		width: 48px;
	}
}