JSFiddle - React, Tailwind, and code Playground

by Troy Johnson

HTML

<body>

<div id="wrapper">

<header><h1>KEITARO ISHIGURO</h1></header>
<nav>
<ul>
	<li><a href="http://www.keitaroishiguro.com/">Home</a></li>
	<li><a href="http://cis3630.org/student-webpages1.php">STUDENTS PAGE</a></li>
	<li><a href="http://dowkim.com/">DOW KIM</a></li>
	<li><a href="https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.keitaroishiguro.com%2F">VALIDATION</a></li>  
	<li><a href="https://www.google.com/webmasters/tools/mobile-friendly/?url=http%3A%2F%2Fwww.keitaroishiguro.com%2F">MOBILE FRIENDLY TEST</a></li>
  
</ul>
</nav>


<main>
<p id="totheleft"><img alt="keitaro ishiguro's profile picture" src="/images/profile_picture.jpg" class="profilepicture"></p>

<hr />
<h2>About</h2>

	<p>Keitaro Ishiguro is an award-winning travel blogger based in Brooklyn, New York.
	Through his eyes, not only&nbsp;he&nbsp;tells series of&nbsp;travel tips,
	but also true living conditions,&nbsp;people, and their lifestyle are revealed.
	His first journey started in 2011 when he continued his education by
	attending to a private college located right outside Boston, Massachusetts.
	He still remembers the moment he stepped on the land of
	United States of America for the first time. It was with a sense of discovery.
	Throughout his life Ishiguro has visited more than 20 countries, 50 cities.
	Things he enjoys in his journey are unique.
	Ice climbing in Iceland, hitchhiking in Germany, bungee jumping in New Zealand,
	camping without a tent in Hawaii, and mostly pub crawls.
	While his curiosity about the unknown keeps him growing,
	Ishiguro shares his stories of awe-inspiring places&nbsp;in the spirit of adventure.
	<br><br>
	Born in 1993 in Kawasaki, Japan<br><br>
	Established in 2016<br><br><br>
	Brooklyn, NY</p>

<br>
<hr />

<br><br>

 

<div class="chessboard"> 



		<!-- 1st -->
			<div class="white">&#9820;</div>
			<div class="black">&#9822;</div>
			<div class="white">&#9821;</div>
			<div class="black">&#9819;</div>		
			<div class="white">&#9818;</div>
			<div...

CSS

body { background-color: #fff;
      background-image: url(images/grid.jpg);
      color: white;
	  font-family: georgia, serif;
}
#wrapper { width: 80%;
          margin-right: auto;
		  margin-left: auto;
		  min-width: 700px;
		  max-width: 1024px;
		  background-color: #F8F9F9;
		  color: #696969;
		  font-family: georgia, serif;
		  letter-spacing: 1.2px;
		  line-height: 1.8;
		  word-spacing: 8px;
}
header { background-color: #white;
       color: #85929E;
	   background-size: cover;
	   background-image: url(images/blue-gray.png);
	   background-position: center;
	   background-repeat: no-repeat;
	   font-family: georgia, serif;
}

.profilepicture{
	max-height: 2500px; max-width: 400px; padding:0px 20px 10px 5px; float:left;
}

.line{	width:900p;}
	
h1 { text-align: center;
     font-size: 3em;
     padding: 10px;
	 line-height: 150%;
}
h2	{
	color: #212F3C;
}


nav { font-weight: bold; 
	 float: left;
	 width: 100px;
}
nav ul { list-style-type: none; }
nav a { text-decoration: none; }
nav a:link { color: #212F3C; }
nav a:visited { color: #212F3C; }
nav a:hover { color: #CCCCCC; }
nav li {padding: 10px 10px 10px 0px}
.category { font-weight: bold;
            background-color: #FFFFFF;
			color: #003366;
			font-size: 1.1em;
			text-shadow: 1px 1px 1px #666;
}
main { margin-left: 180px;
      padding-right: 20px;
	  padding-bottom: 20px;
}
img { border-style: none; }
footer { font-size: 0.70em;
       font-style: italic;
	   padding: 10px;
	   margin-left: 180px;
}
footer nav { text-align: left; }
#mobile { display: none; }
#desktop { display: inline; }
header, nav, main, footer { display: block; }
@media only screen and (max-width: 1024px) {
  body { margin: 0; padding: 0; background-color: #fff; background-image: none; }
  #wrapper { width: auto; min-width: 0; margin: 0; }
  h1 { margin: 0; text-align: center; font-size: 2em; line-height: 200%; }
  nav { float: none; width: auto; }
  nav li { display: inline-block; }
  nav a { padding: 1em;...