JSFiddle - React, Tailwind, and code Playground

by Cxtz11

HTML

<!DOCTYPE html>

<html>
<head>
    <title>S</title>
    

    <meta charset="UTF-8">
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon">
	<link href="style.css" type="text/css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  <script src="https://kit.fontawesome.com/36055e7440.js" crossorigin="anonymous"></script>
 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

</head>

<body>




<div class="Logo">
<img class="logo" src="S.png" alt="S" style="width: 220%" style="height : auto">
</div>

<div class="bg-text">
  <h1> Login</H1>
</div>


<footer id="footer" class="main-footer clearfix">
<p class="Copyright clearfix">
  S &copy; 2020
</p>
<h1 class="Social clearfix">
<a href="https://instagram.com">  <i class="fab fa-instagram"></i> </a>
</h1>

<ul class="footer-nav clearfix">
  <li><a href="/Impressum/Impressum.html">Impressum</a></li>
    <li><a href="/Datenschutz/Datenschutz.html">Datenschutz</a></li>
      <li><a href="/AGB/AGB.html">AGB</a></li>
</ul>

</footer>

</body>

</html>

CSS

.logo {
width : 100px;
height :100px;
object-fit: scale-down;
}





a {
text-align: center;
text-decoration: none;
color: #FFF; }


@media only screen and (orientation: landscape) {
body{ 
	background-image: url("background.jpg");
 	background-color: #cccccc;
 	background-size: cover;
 	background-repeat: repeat;
  	overflow:hidden;
	font-family: 'Roboto', sans-serif;
}

.main-footer {
  border-color: white;
  border-radius: 0px;
  border-top-style: solid;
  border-width: thick;
  padding: 10px 5%
  background;
  width:100%;
 height:40px;
 position:absolute;
 bottom:0;
 left:0;
 background-color: #333;
 opacity: inherit;
}

.footer-nav{
  list-style: none;
  position: absolute;
  top: -7px;
  right: 50px;
}
.footer-nav li{
  float: left

}
.footer-nav li + li {
  margin-left: 10px;
}
.Copyright {
  margin-left: 50px;
  margin-top: 10px;
  color: #fff;

}
.Social {
position: absolute;
top: -20px;
right: 50%;
color: #fff;
}
}
@media only screen and (orientation: portrait) {
body{
	background-image: url("mobilebg.jpg");
 	background-color: #cccccc;
	background-size: 100%;
 	background-repeat: no-repeat;
	background position: center;
  	overflow:hidden;
	font-family: 'Roboto', sans-serif;


}

.main-footer {
  border-color: white;
  border-radius: 0px;
  border-top-style: solid;
  border-width: thick;
  background;
  width:100%;
 height:100px;

 position:absolute;
 bottom:0;
 left:0;
 background-color: #333;
 opacity: inherit;


}

.footer-nav{
  list-style: none;
  position: absolute;
  top: 20px;
  right: 50%;




}
.footer-nav li{
  float: left;

}
.footer-nav li + li {
 margin-left: 10px;
}
.Copyright {
display:flex;
justify-content:center;
align-items:flex-end;
margin-top: 80px;
  color: #fff;
}
.Social {
position: absolute;
top: -20px;
right: 50%;
color: #fff;


}


}

.bg-text {
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.4);
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 50%;
  left: 50%;
...