JSFiddle - React, Tailwind, and code Playground

by qunzorez

HTML

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>ICY.EMAIL</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ICY.EMAIL - Free personal email" />
    <meta name="keywords" content="email, e-mail, webmail, free email, free e-mail, free webmail, secure email, private email, personal email, company email, business email, corporate email, office email, secure email, private e-mail, personal e-mail, company e-mail, business e-mail, corporate e-mail, office e-mail, email address, e-mail address, webmail address, free email address, free e-mail address, free webmail address, secure email address, private email address, personal email address, company email address, business email address, corporate email address, office email address, secure email address, private e-mail address, personal e-mail address, company e-mail address, business e-mail address, corporate e-mail address, office e-mail address, secure webmail, private webmail, personal webmail, company webmail, business webmail, corporate webmail, office webmail, email hosting, e-mail hosting, webmail hosting, email service, e-mail service, webmail service, email provision, e-mail provision, webmail provision, providing email, providing e-mail, providing webmail" />
    <link rel="stylesheet" type="text/css" media="screen" href="assets/styles/index-style.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="assets/styles/index-buttons.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="complete.css"/> 
</head>
<body>

<div id="centre-screen">
    <div id="logo">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRkfwFf8FsZmezdBckswJ3JzunkUdKbKP-JXTnII-kJLv64CbJmcjhH7Nzg36ApPXchy2c&usqp=CAU" alt="">
    </div>
    <div id="icy-email">
      <img...

CSS

body {
  display: block !important;
  position: static !important;
  height: auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

a {
  text-decoration: none !important;
}

#centre-screen {
  background: none;
  position: absolute;
  top: 55%;
  left: 65%;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: auto;
  padding: 1rem;
  width: 100%;
  max-width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  color: steelblue;
  column-fill: auto;
}

#logo {
  background: none;
  position: relative;
  display: block;
  margin: auto;
  border: 3px solid #AAAAAA;
  border-radius: 100rem
}

#logo img {
  z-index: -50;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  object-fit: contain;
}

#icy-email img {
  height: 35%;
  width: 50%;
  float: left;
  margin-bottom: ;
}

#text {
  margin-right: auto;
}

@media (orientation: portrait) {
  emphasized text #centre-screen {
    grid-gap: 10vh;
  }
  #logo {
    height: 40vw !important;
    width: 40vw !important;
    margin: auto;
  }
}

@media (orientation: landscape) {
  #centre-screen {
    grid-gap: 10vw;
    grid-template-columns: auto auto
  }
  #buttons {
    width: 18em !important;
  }
  #logo {
    height: 40vh !important;
    width: 40vh !important
  }
}

@media (orientation: landscape) and (min-width: 800px) {
  #buttons {
    width: 25em !important;
  }
}