JSFiddle - React, Tailwind, and code Playground

by shakibdshy

HTML

<html>

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>xPress- About Company HTML Template</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div class="notice">
			<span class="font-bold pb-30">Valued Clients,</span>
      <span>
        Kindly note that you may experience service downtime due to technical scheduled maintenance today (15th October) from 2am to 6am ( GMT+1 ).
      </span>
      <span class="pt-30">
        During this time, the IPTB service may interrupt or you may experience downtime. <br>Please accept our sincere apologies for the downtime you may experience.
      </span>
			<h4 class="title">Kind Regards,</h4>
			<span class="designation">IPTV Systeam Maintenance Team</span>
    </div>
  </body>

</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

.notice {
	background: #f5f7fb;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 10%;
	font-family: 'Poppins', sans-serif;
}

span {
	color: #83868c;
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
}

.title {
	font-size: 20px;
	font-weight: 600;
	color: #83868c;
	padding-top: 50px;
}

.designation {
	font-weight: 500;
}

.font-bold {
	font-weight: 700;
}

.pt-30 {
	padding-top: 30px;
}

.pb-30 {
	padding-bottom: 30px;
}