Announcement Page - Copy this React, Tailwind Component to your project
<!DOCTYPE-html>-<html-lang="en">-<head>-<meta-charset="UTF-8">-<meta-name="viewport"-content="width=device-width,-initial-scale=1.0">-<title>Announcement-Page</title>-<style>-body-{-margin:-0;-font-family:-Arial,-sans-serif;-background-color:-#5cb0f0;-}-.container-{-padding:-20px;-}-.header-{-display:-flex;-flex-direction:-column;-align-items:-center;-text-align:-center;-color:-#fff;-}-.header-img-{-width:-60px;-height:-60px;-margin-bottom:-10px;-}-.header-h1-{-font-size:-20px;-margin:-0;-}-.priority-key-{-display:-flex;-justify-content:-center;-gap:-20px;-margin-top:-10px;-}-.priority-key-span-{-display:-flex;-align-items:-center;-font-size:-14px;-color:-#fff;-}-.priority-key-span-.circle-{-width:-12px;-height:-12px;-border-radius:-50%;-margin-right:-5px;-}-.circle.red-{-background-color:-red;-}-.circle.yellow-{-background-color:-yellow;-}-.circle.green-{-background-color:-green;-}-.announcement-container-{-background-color:-#f5f5f5;-padding:-20px;-border-radius:-10px;-margin-top:-20px;-}-.announcement-container-h2-{-text-align:-center;-font-size:-18px;-}-.announcement-{-display:-flex;-align-items:-flex-start;-margin-bottom:-15px;-padding:-10px;-background-color:-#fff;-border-radius:-8px;-border:-1px-solid-#ccc;-}-.announcement-.circle-{-margin-right:-10px;-width:-20px;-height:-20px;-}-.announcement-p-{-margin:-0;-font-size:-14px;-}-</style>-</head>-<body>-<div-class="container">-<div-class="header">-<img-src="logo.png"-alt="School-Logo">-<h1>Southern-Christian-College</h1>-<h1>Pob-5,-Midsayap,-Cotabato</h1>-<div-class="priority-key">-<span><div-class="circle-red"></div>High</span>-<span><div-class="circle-yellow"></div>Medium</span>-<span><div-class="circle-green"></div>Normal</span>-</div>-</div>-<div-class="announcement-container">-<h2>ANNOUNCEMENT</h2>-<div-class="announcement">-<div-class="circle-red"></div>-<p>URGENT:-(11/21/24---11/25/24)</p>-</div>-<div-class="announcement">-<div-class="circle-red"></div>-<p>URGENT:-(11/26/24---12/2/24)</p>-</div>-<div-class="announcement">-<div-class="circle-red"></div>-<p>URGENT:-(12/4/24---12/6/24)</p>-</div>-<div-class="announcement">-<div-class="circle-yellow"></div>-<p>URGENT:-(11/26/24---12/10/24)</p>-</div>-<div-class="announcement">-<div-class="circle-green"></div>-<p>Normal-Announcement</p>-</div>-</div>-</div>-</body>-</html>-Generate-UI-design
