JSFiddle - React, Tailwind, and code Playground

by jpeter06

HTML

<style>
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
		"Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.7;
	background-color: #f4f4f4;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}

.container {
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	max-width: 300px;
	margin: 10px auto;
	padding: 1rem;
}

h1 {
	padding: 5px 0;
	font-size: 1.2rem;
	color: #111;
	text-align: center;
}

input {
	padding: 10px;
	font-size: 14px;
	border-radius: 5px;
	outline: none;
	width: 100%;
	border: solid 1px #ccc;
}

form i {
	margin-left: -30px;
	cursor: pointer;
}

button {
  box-sizing: border-box;
  width: 100%;
  padding: 3%;
  background: #007bff;
  border: none;
  color: #fff;
  font-size: 14px;
  border-radius: 5px;
}

button:hover {
  background: #0069d9;
  cursor: pointer;
}

.submit{
	margin-top:10px;
}

.eye{
  position:absolute;
  width:29px;
  height:29px;
  margin-left: -33px;
  margin-top: 5px;
	cursor: pointer;
  fill:red;
  background-image: 
        url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'  enable-background='new 0 0 512 512'>  <g>    <g>      <path d='m494.6,241.1l-50.1-47c-50.5-47.3-117.4-73.3-188.5-73.3-71.1,0-138,26-188.4,73.3l-50.1,47c-12.1,12.9-4.3,26.5 0,29.8l50.1,47c50.4,47.3 117.3,73.3 188.4,73.3 71.1,0 138-26 188.4-73.3l50.1-47c4.7-3.9 12.2-17.6 0.1-29.8zm-238.6,74.9c-33.1,0-60-26.9-60-60 0-33.1 26.9-60 60-60 33.1,0 60,26.9 60,60 0,33.1-26.9,60-60,60zm-194.7-60l34.3-32.1c32-30 72-49.9 115.5-58.1-33.1,16.6-55.8,50.8-55.8,90.2 0,39.4 22.8,73.7 55.8,90.2-43.5-8.1-83.5-28.1-115.5-58.1l-34.3-32.1zm355.2,32.1c-32,30-72,50-115.5,58.1 33.1-16.6 55.8-50.8 55.8-90.2 0-39.4-22.8-73.6-55.8-90.2 43.5,8.1 83.5,28.1 115.5,58.1l34.3,32.1-34.3,32.1z' style='fill:rgb(100,100,100);'/>        ...