JSFiddle - React, Tailwind, and code Playground

by Snaptik

HTML

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Suspended</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
    body {
      margin: 0;
      padding: 0;
      background-color: #000A66;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      color: white;
      font-family: Arial, sans-serif;
    }
    a {
      color:#ffffff;
      text-decoration:none;
    }

    #content {
      text-align: center;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    #suspended-image {
      width: 300px;
      margin-top: 50px;
    }

    #suspended-heading {
      font-size: 35px;
      margin-bottom: 10px;
    }

    #additional-text {
      font-size: 1.2em;
      margin-top: 20px;
    }

    .contact-icons {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
    }

    .contact-info {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .contact-icons i {
      font-size: 2em;
      margin-bottom: 10px;
    }

    #hosting-text {
      margin-top: 50px;
    }

    #footer {
      margin-top: 20px;
      text-align: center;
      padding: 10px;
    }
  </style>
</head>
<body>
<div id="content">
<a href="https://rehost.ge/"><img id="suspended-image" src="https://rehost.ge/REHOST-logo.svg" alt="REHOST logo"></a>
<h1 id="suspended-heading">ჰოსტინგის მომსახურება შეჩერებულია !</h1>
<p id="additional-text">დამატებითი ინფორმაციისთვის დაგვიკავშირდით</p>
<div class="contact-icons">
<div class="contact-info">
<i class="fab fa-facebook-messenger"></i>
<span style="margin-top: 10px;"><a href="https://m.me/rehost.ge" rel="nofollow" target="_blank">Messenger</a></span>
</div>
<div...