JSFiddle - React, Tailwind, and code Playground

by lennyekberg

HTML

<style>
	.webform-wrapper{ background: #eff1f0; max-width: 600px; }
	
	.webform-wrapper a{ color: #0076C2; }
	
	
	.webform-header{ background: #173254; width: 100%; color: #fff; margin-bottom: 0px; margin-top: 0px; padding: 10px 0; }
	.webform-header-inner{ width: 95%; margin: 0 auto; display: block; }
	
	
	.webform-values{ width: 100%; margin: 0 auto; padding: 10px 0} 
	
	.webform-values .form-item{
		width: 95%;
		margin-bottom: 12px;
		background: #fff;
		border: 1px solid #ccc;
		padding: 8px;
		margin-top: 22px;
		position: relative;
		margin: 30px auto 12px auto;
	}
	.webform-values .form-item label{
		width: 100%;
		font-weight: bold;
		display: block;
		background: #eff1f0;
		border: 0px hidden transparent;
		padding: 0;
		margin-top: auto;
		position: absolute;
		top: -21px;
		left: 0;
	}
	
	.webform-wrapper .footer{
		background: #cccecc;
		padding: 12px 0;
		margin-top: 20px;
	}
	.webform-wrapper .footer .footer-inner{
		width: 95%;
		margin: 0 auto;
		font-size: 12px
	}

	
</style>

<div class="webform-wrapper">
	<h2 class="webform-header"><span class="webform-header-inner">Jobbansökan – Spontanansökan</span></h2>
	<div class="webform-values">
		
<div  class="form-item webform-component webform-component-display webform-component--namn">
  <label>Namn </label>
 <span class="field-prefix"></span> lenny <span class="field-suffix"></span>
</div>
<div  class="form-item webform-component webform-component-display webform-component--e-post">
  <label>E-post </label>
 [email protected]
</div>
<div  class="form-item webform-component webform-component-display webform-component--telefon">
  <label>Telefon </label>
 <span class="field-prefix"></span> 24242424234 <span class="field-suffix"></span>
</div>
<div  class="form-item webform-component webform-component-display webform-component--meddelande">
  <label>Personligt brev </label>
 test
</div>

	</div>
</div>