JSFiddle - React, Tailwind, and code Playground

by jocke5a

HTML

<div class="search">
    <form action="#" style="width: 200px;"><input name="hledanytext" class="text" 
    placeholder="zadejte text..." type="search"><input value="" class="odeslat" type="submit">
    </form>
  </div>

CSS

body {
margin: 10px;
box-sizing: border-box;
background-color: red;
}   

* {
box-sizing: border-box;
}
.search {
	height: 30px; height: 38px;
	padding-right: 25px;
}

.search form {
	height: 100%;
	color: white;
}

.search form .text {
	padding: 0  0 0 20px;
	background-color: white;
	border: 2px solid black;
	border-right: none;
	color: black;
}

.search form .odeslat {
	background-color: blue;
	border: 2px solid black;
	border-left: none;
	color: white;
}

.text {
	height: 100%;
	width: 150px;
	border: none;
	background-color: #489FDF;
	color: white;
}

.odeslat {
	border: none;
	height: 100%;
	width: 50px;
	background: url("../img/magnifying-glass.svg") no-repeat center;
	background-size: 20px;
}

.search form:hover .odeslat {
	background: blue url("../img/lupa.svg") no-repeat center;
	background-size: 20px;
}