JSFiddle - React, Tailwind, and code Playground
by Fredy Sudhir
HTML
<div id="principal">
<div class="header">
<h1>SISTEMAS DIGITALES</h1>
</div>
<div class="form1">
<form id="formulario1" onsubmit="return submitForm();" method="post" >
Nombre: <input type="text" name="nombre" autocomplete="off"/><br /> <br>
Boleta: <input type="text" name="boleta" autocomplete="off"/><br />
<br /><br />
<div class="form_result"> </div>
</form>
</div>
<br/><br/>
<!-- PRIMER SEMESTRE -->
<div class="nivel">NIVEL I</div>
<form class="creditos" name="digitales" id="digitales" method="post" >
<div class="semestre1" >
<table >
<tr>
<td>
UNIDADES DE APRENDIZAJE
</td>
<td >
VALOR EN CRÉDITOS
</td>
<td>
CALIFICACIÓN
</td>
<td>
ACREDITACIÓN
</td>
<td>
CARGA ACADÉMICA
</td>
</tr>
<tr>
<td nowrap id="materia">
ALGEBRA
</td>
<td>
5.62
</td>
<td>
<input type="text" id="1" name="1" size="2px">
</td>
<td>
Row 1
</td>
<td>
Row 1
</td>
</tr>
<tr>
<td nowrap id="materia">
COMPUTACION BASICA I
</td>
<td>
4.5
</td>
<td>
<input type="text" id="2" name="2" size="2px">
</td>
<td >
Row 2
</td>
<td >
Row 2
</td>
</tr>
<tr>
<td nowrap id="materia">
EXPRESION ORAL Y ESCRITA I
</td>
<td>
4.5
</td>
<td>
<input type="text" id="3" name="3" size="2px">
</td>
<td >
Row 3
</td>
<td>
Row 3
</td>
</tr>
<tr>
<td nowrap id="materia">
INGLES I
</td>
<td>
5.62
</td>
<td>
<input type="text" id="4" name="4" size="2px">
</td>
<td >
Row 4
</td>
<td>
Row 4
</td>
</tr>
<tr>
<td nowrap id="materia">
FILOSOFIA I
</td>
<td>
3.37
</td>
<td>
<input type="text" id="5" name="5" size="2px">
</td>
<td >
Row 5
</td>
<td>
Row 5
</td>
</tr>
<tr>
<td nowrap id="materia">
DESARROLLO PERSONAL
</td>
<td>
4.5
</td>
<td>
<input type="text" id="6" name="6" size="2px">
</td>
<td >
Row 6
</td>
<td>
Row 6
</td>
</tr>
<tr>
<td nowrap id="materia">
ORIENTACION JUVENIL Y PROFESIONAL I
</td>
<td>
0.0
</td>
<td>
<input type="text" id="7" name="7" size="2px">
</td>
<td >
Row 7
</td>
<td>
Row 7
</td>
</tr>
<tr>
<td nowrap id="materia">
DESARROLLO DE HAB. DEL...CSS
/* RESET CSS*/
*{
margin:0;
border:0;
padding:0;
}
/* Diseño...*/
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
display: block;
}
html{height:100%;width:100%;}
body {
margin:3%;
text-align:center;
font: Arial, sans-serif;
color:white;
background-image: url(negro3.jpg);
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size:cover;
background-size: cover;
}
#principal {
position:relative;
opacity:0.9;
width:50% !important;
min-width:500px;
min-height:100%;
max-width:1500px;
margin:0 auto 0 auto;
background-color: #360000;
border:1px solid transparent;
padding:5%;
}
#footer{
position:absolute;
bottom:0;
left:0;
width: 100%;
background-color:gray;
height:2%;
}
.header {
position:absolute;
left:0;
top:0;
width:100%;
height:3%;
background-color:gray;
}
.form1{
width:70%;
height:30%;
margin:15% auto 0 auto;
}
#formulario1 input{
padding:.3em;
}
.semestre1 {
display: table;
margin:0 auto 10% auto;
padding:0px;
box-shadow: 3px 4px 6px #888888;
-moz-border-radius-bottomleft:7px;
-webkit-border-bottom-left-radius:7px;
border-bottom-left-radius:7px;
-moz-border-radius-bottomright:7px;
-webkit-border-bottom-right-radius:7px;
border-bottom-right-radius:7px;
-moz-border-radius-topright:7px;
-webkit-border-top-right-radius:7px;
border-top-right-radius:7px;
-moz-border-radius-topleft:7px;
-webkit-border-top-left-radius:7px;
border-top-left-radius:7px;
}.semestre1 table{
border-collapse: collapse;
border-spacing: 0;
margin:0px;padding:0px;
}.semestre1 tr:last-child td:last-child {
-moz-border-radius-bottomright:7px;
-webkit-border-bottom-right-radius:7px;
border-bottom-right-radius:7px;
}
.semestre1 table tr:first-child td:first-child {
-moz-border-radius-topleft:7px;
-webkit-border-top-left-radius:7px;
border-top-left-radius:7px;
}
.semestre1 table tr:first-child...