JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title></title>

<link rel="stylesheet" href="test1.css" type="text/css"

</head>

<body>
<div id="home" class="panel">

<div class="point_information">

<div class="photogalery"></div>

<div class="point_content">
<header class="point_name"><h3>1. Памятник Данилу Галицкому во Львове</h3></header>
<div class="info"><h6>Памятник основателю города Львова, сыну князя Романа Мстиславовича, известному политическому деятелю и полководцу князю Данилу Романовичу Галицкому, в последствии провозглашенным первым королем галицко-волынских земель — расположен в самом центре города на старинной площади Галицкой.<br>
<br>
Памятник был возведен в 2001 году в честь 800-летия со дня рождения Данила Галицкого по проекту творческой группы — скульпторов В.Ярича и Р.Романовича, а также архитектора Я.Чурила. Проект выиграл конкурс среди нескольких десятков других проектов.</h6>
</div>
</div>
</div>

</div>


<div id="portfolio" class="panel">

<div class="point_information">

<div class="photogalery"></div>

<div class="point_content">
<header class="point_name"><h3>1. Памятник Данилу Галицкому во Львове</h3></header>
<div class="info"><h6>Памятник основателю города Львова, сыну князя Романа Мстиславовича, известному политическому деятелю и полководцу князю Данилу Романовичу Галицкому, в последствии провозглашенным первым королем галицко-волынских земель — расположен в самом центре города на старинной площади Галицкой.<br>
<br>
Памятник был возведен в 2001 году в честь 800-летия со дня рождения Данила Галицкого по проекту творческой группы — скульпторов В.Ярича и Р.Романовича, а также архитектора Я.Чурила. Проект выиграл конкурс среди нескольких десятков других проектов.</h6>
</div>
</div>
</div>

</div>


<div id="about" class="panel">

<div class="point_information">

<div class="photogalery"></div>

<div class="point_content">
<header class="point_name"><h3>1. Памятник Данилу Галицкому во...

CSS

* {
margin:0;
padding:0;
border:0;
}

a {
text-decoration: none;
color: white;
}

h1{
font: bold 30px Trebuchet MS;
color: white;
letter-spacing: 1px;
}

h2 {
font: 34px Volvo Broad Cyrillic;
color: #333333;
letter-spacing: 1px;
}

h3 {
font: 23px Volvo Broad Cyrillic;
color: #333333;
}

h4 {
font: 14px Trebuchet MS;
color: #333333;
}

h5 {
font: 14px Trebuchet MS;
color: #333333;
}

h6 {
font: 13px Trebuchet MS;
color: #333333;
}

.point_content {
width: 500px;
float: right;
margin-right: 210px;
}

.point_info {
background: url(../img/point_info.png) no-repeat;
height: 215px;
margin-top: 30px;
padding-bottom: 60px;
}

.photogalery {
background: url(../img/photogalery.png) no-repeat;
width: 226px;
height: 154px;
float: left;
padding-right: 30px;
position: relative;
z-index: 30;
}


.point_information {
width: 980px;
margin: 0 auto;
padding-top: 30px;
}

.info {
padding: 10px 0 10px 0;
}

.panel{
width: 98%;
min-height: 100%;
position: absolute;
background: url(../img/point_info.png) no-repeat;
margin-left: -102%;
z-index:2;
-webkit-transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
-o-transition: all .6s ease-in-out;
-ms-transition: all .6s ease-in-out;
transition: all .6s ease-in-out;
}
.panel:target{
margin-left: 0%;

}

#header{

position: absolute;
z-index: 2000;
width: 235px;
top: 50px;
}

#header h1{
font-size: 30px;
font-weight: 400;
text-transform: uppercase;
color: rgba(255,255,255,0.9);
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
padding: 20px;
background: #000;
}

#navigation {
margin-top: 20px;
width: 235px;

display:block;

list-style:none;

z-index:3;

}

#navigation a{

color: #444;

display: block;

background: #fff;

background: rgba(255,255,255,0.9);

line-height: 50px;

padding: 0px 20px;

text-transform: uppercase;

margin-bottom: 6px;

box-shadow: 1px 1px 2px rgba(0,0,0,0.2);

font-size: 14px;

}

#navigation a:hover {

background: #ddd;

}

JavaScript

document.location.hash = "home";