JSFiddle - React, Tailwind, and code Playground

by dife

HTML

<nav class="links">
		<label for="rd_home">Home</label>
		<label for="rd_servicos">Serviços</label>
		<label for="rd_fale_conosco">Fale Conosco</label>		
	</nav>
	<div class="scroll">
		<input type="radio" name="grupo" id="rd_home" checked="true">
		<input type="radio" name="grupo" id="rd_servicos">
		<input type="radio" name="grupo" id="rd_fale_conosco">
		<div class="sections">
			<div class="bloco" id="homejs">
				<div id="conteiner_home">
				<H1>Padaria</H1>
				<br>
				<p>Fazemos todo tipo de paes e guloseimas </p>
				</div>
			</div>
			<div class="bloco" id="servicosjs">
				<div id="conteiner_servicos">
					<article class="item">
						<h3>Doces</h3>
						<br>
						<p>Fazemos trufas, paes de mel, brigadeiro e tudo.</p>
						<br>
						<br>
						<h2>R$ 3,00</h2>
					</article>
					<article class="item">
						<h3>Salgados</h3>
						<br>
						<p>Fazemos coxinhas, esfirras, risoles e tudo.</p>
						<br>
						<br>
						<h2>R$ 4,00</h2>
					</article>
					<article class="item">
						<h3>Confeitarial</h3>
						<br>
						<p>Fazemos bolos de todos tipo e tamanhos</p>
						<br>
						<h2> RS 100,00</h2>
					</article>
				</div>
			</div>
			<div class="bloco" id="fale_conoscojs">
				<div id="teste-form">
					<form name="fomrcontato" action="#" method="post">
						<h1>Contato</h1>
						<p class="nome">
							<input type="text" name="nome" placeholder="Infomme seu nome" required="required"> 
			
						<p class="assunto">
							<input type="text" name="assunto" placeholder="Sobre o que quer falar" required="required">
						</p>
						<p>
							<textarea name="mesagem" placeholder="Deixe sua mensagem"></textarea>
						</p>
						<p class="enviar">
							<input type="submit" name="enviar" value="enviar">
						</p>
						
					</form>

				</div>
			</div>
		</div>

	</div>

CSS

*{
		margin: 0;
		padding: 0;
	}
	.links{
		width: 100vw;
		height: 50px;
		position: fixed;
		display: flex;
	}
	.links label{
		padding: 10px 0;
		flex-grow: 1;
		cursor: pointer;
		transition: all .4s;
		text-align: center;
		font-family: 'Arial';
		font-size: 100%;
		color: #fff;
	}

	.links label:hover{
		background-color: rgba(255,255,255,.3);
	}

	.scroll input {
		display: none;
	}

	.bloco{
		width: 100vw;
		height: 100vh;
		display: flex;
	}

	.scroll{
		display: flex;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}

	.sections{
		transition: all .4s;
	}

	.item{ 
		margin: 20px;
		padding: 10px;
		align-items: center;
		height: 45vh;
		width: 75vw;
		background-color: rgba(211,211,211,.8);
		border-radius: 30px;
	}

	.item h3{
		text-align: center;
	}

	.item p{
		text-align: justify;
		margin-top: 5vh;
		margin-bottom: 5vh;
	}
	.item h2{
		text-align: center;
	}

	#homejs{
		background-color: #7fbd42;
		/*background: url("../imagens/Home_page.png");*/
		background-size: cover;
		background-repeat: no-repeat;
	}
	#servicosjs{
		/*background: url("../imagens/Servicos.png");*/
    background: red;
		background-size: cover;
		background-repeat: no-repeat;
		align-items: center;
	}
	#precojs{
		background-color: #414950;
	}
	#fale_conoscojs{
		background-color: #aaa;
		/*background: url("../imagens/Fale_conosco.png");*/
		background-size: cover;
		background-repeat: no-repeat;
	}

	#rd_home:checked ~ .sections{
		margin-top:0vh;
	}

	#rd_servicos:checked ~ .sections{
		margin-top:-100vh;
	}
	#rd_fale_conosco:checked ~ .sections{
		margin-top:-200vh;
	}

	#homejs h1{
		position: relative;
		left: 45%;
		top: 40%;
	}

	#homejs p{
		text-align: left;
		position: relative;
		left: 35%;
		top: 50%;
	}

	#conteiner_servicos {
		background-color: rgba(211,211,211,.3);
		align-items: center;
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items:...