JSFiddle - React, Tailwind, and code Playground

HTML

<body>


       <!-- suchfeld -->  
		<form action="demo_form.asp">
			<div id="suchfeld">
            	<nobr>
					<input type="text" spellcheck="false" class="form-control input" placeholder="Ort    Aktivität" />
                	<a href="#"><img class="button-suchen" src="bilder/button-suchen.png" alt="Button suchen"></a>
				</nobr> 
			</div>
		</form> 
		
    


</body>



</html>

CSS

/* suchfeld abstand nach oben zum logo */
#suchfeld {
	padding-top: 80px;
	margin:0 auto;
	}

	
	
/* suchfeld aussehen nach klick (aktiver zustand) */
.input:focus {
    border: solid 1px #D8D8D8;
	outline-width: 0;
	margin:0 auto;
	}


/* suchfeld aussehen */
.form-control {
    border-radius: 90px;
	border: solid 1px #EAEAEA;
	color: #40BAEC;
	width:500px;
	max-width:500px;
	height:45px;
	width: 100%;
	box-shadow: none;
	font-size: 1.4em;
	}
	



/* schrift farbe placeholder */
.form-control::-webkit-input-placeholder { color: #E2E2E2; text-align: center; padding-left:50px }
.form-control:-moz-placeholder { color: #E2E2E2; text-align: center; padding-left:50px }
.form-control::-moz-placeholder { color: #E2E2E2; text-align: center; padding-left:50px }
.form-control:-ms-input-placeholder { color: #E2E2E2; text-align: center; padding-left:50px }






/* zentriert eingabe des textes im suchfeld placeholder  */
input {
	text-align: center;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;        /* Opera/IE 8+ */
	padding-right: 180px
	}
	
	


/* versteckt eingabe text (placeholder) nach klick  */
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* Firefox 18- */
input:focus::-moz-placeholder { color:transparent; } /* Firefox 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* oldIE ;) */




/* suchfeld buttom */	
.button-suchen {
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
	margin-left:-48px;
	width:48px;
	margin-top: -1.515px;
	position:fixed;
	}
	

	
	
/* aktivitäten link hover */
.button-suchen:hover {
	-webkit-transform:scale(1.038);
	transform:scale(1.038);
	}