JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
	<form action="" class="my-form">
		<div class="my-form_item">
			<input type="text" class="my-form_imput" placeholder="Имя">
		</div>
			<div class="my-form_item">
			<input type="text" class="my-form_imput" placeholder="Телефон">
		</div>
			<div class="my-form_item">
			<input type="text" class="my-form_imput" placeholder="Email">
		</div>
		<button type="submit" class="my-form_btn">Войти</button>
	</form>
</div>

CSS

<style>
	.wrapper{
		max-width: 980px;
		min-height: 100px;
	}
	
	
	.my-form{
		background: rgba(4, 4, 4, 0.78);
 		padding: 20px;
	}
	
	.my-form_item{
		display: inline-block;
	}
	
	.my-form_imput{
		height: 30px;
	}
	

.my-form, .my-form_item, .my-form_imput {
  width: 100%;
}
	
	
@media (min-width: 768px) {
  .my-form_item, .my-form_imput  {
    width: 25.75%;
    margin-right: 1%;
  }  
}
</style>