JSFiddle - React, Tailwind, and code Playground
by seong gyun jeon
HTML
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Selection TEST</title>
<style type="text/css">
html body{
width: 100%;
height: 100%;
font-size: 13px;
background-color: #CCCCCC;
margin: 0;
padding: 0;
}
#wrap{
width: 100%;
height: 100%;
float: left;
}
#wrap #container{
position: relative;
width: 700px;
/*height: 100%;*/
margin: 0 auto;
}
#text-container{
position: relative;
width: 100%;
height: 100px;
text-align: center;
color: white;
background-color: black;
padding: 20px;
}
#btn_container{
position: relative;
width: 100%;
height: 30px;
margin-top: 10px;
float: left;
}
#btn_container button{
position: relative;
width: 120px;
height: 50px;
font-size: 11px;
}
#input_container{
position: relative;
width: 100%;
margin-top: 20px;
float: left;
}
#input_container label {
display: block;
}
#input_container input {
width: 100px;
height: 10px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="container">
<div id="text-container" contenteditable="true">
<span style="height: 20px">HELLO</span>
<span style="height: 20px;padding-left: 5px;">WORLD</span>
<span style="height: 20px;padding-left: 5px;">TEST</span>
<span style="height: 20px;padding-left: 5px;">!!!!</span>
</div>
<div id="btn_container">
<button id="btn_test1">Selection TEST...