JSFiddle - React, Tailwind, and code Playground

by Arkl1te

HTML

<div style="width: 960px; margin: 0 auto;">
			<h1>Capítulo 1: Hiren's Boot CD</h1>
				<ol>
					<li>Descargar el hiren's boot acá <a href="http://www.hirensbootcd.org/files/Hirens.BootCD.15.2.zip">http://www.hirensbootcd.org/files/Hirens.BootCD.15.2.zip</a></li>
					<li>Descomprimirlo.</li>
					<li>Grabarlo en un CD la imagen de disco que descomprimiste. <i>(si se reinicia la pc pedile a alguien que te lo grabe por vos y te lo pase :V)</i></li>
					<li>Bootearlo (para no decir: cuando se prende la pc tratá de poner el disco antes de que la compu trate de iniciar el Windows. Si aparece el logo de windows iniciando, reiniciá la pc.)</li>
				</ol>
			
				<div id="nota">En caso de que vuelva a aparecer el logo de windows (es decir que <u>no bootea</u>), entrá al setup del bios (usualmente presionando supr o la tecla que te salta en el logo de la motherboard <i>(esa imagen que la pc te tira ni bien se enciende, si tenés una mother asus te tira ASUS :V)</i>).</div>
			
				<h1>Capítulo 2: Testeando todo</h1>
				<ol type="A">A partir de ahí tenés 3 opciones:
					<li><span style="color:#007700; font-size: 20px;">RAM</span>
						<ol style="background: #CCFFCC">
							<li>Andá a DOS programs</li>
							<li>Testing programs...</li>
							<li>Creo que se llama "goldmemory" el programa u algo con "gold" <i>(abstenete a la pinta del programa c:)</i>.<br> Una vez iniciado va a estar entre 1 o 2 horas trabajando, el tema es que tenés que prestar atención al reloj que se ve algo así:</p>
							
							<p id="code" style="margin-bottom: 0">00:00:00/1</p>
							<canvas id="flecha1" width="105" height="25"></canvas>

							<p>Si la barra (apartada del reloj) llega al 100% el número se vuelve 2, y el porcentaje vuelve a 0%, es decir en el tiempo puede figurar:</p>

							<p id="code" style="margin-bottom: 0">00:46:15/2</p>
							<canvas id="flecha2" width="105" height="25"></canvas>

							<p><u>El test no termina nunca ni se apaga</u>, la única forma de que se...

CSS

body{
				font-family: trebuchet ms;
			}
			
			#nota, ol{
				margin: 5px;
				padding: 10px;
				padding-left: 35px;
				border: 1px solid black;
				border-radius: 20px;
			}
			
			#nota{
				background: #FFFF88;
				border: none;
			}
			#nota:before{ font-weight: bold; content : "NOTA: " ; }
			
			#code{ font-family: monospace; font-size: 16px;}

JavaScript

var canvas = document.getElementById('flecha1');
							  var context = canvas.getContext('2d');

							  context.beginPath();
							  context.moveTo(95, 50);
							  context.lineTo(95, 0);
							  context.lineTo(85, 10);
							  context.moveTo(95, 0);
							  context.lineTo(105, 10);
context.stroke();

var canvas = document.getElementById('flecha2');
							  var context = canvas.getContext('2d');

							  context.beginPath();
							  context.moveTo(95, 50);
							  context.lineTo(95, 0);
							  context.lineTo(85, 10);
							  context.moveTo(95, 0);
							  context.lineTo(105, 10);
							  context.stroke();