HTML/CSS code not adding in dashboard

[chandrasekhar46]

i am creating a dashboard view using HTML/CSS code but after saving the dashboard is showing in text format only 

below is the code and dashboard how is looking 

<dashboard>
<label>Manual-supression</label>
<description>Please enter the values for your One-Time-Blackout.</description>
<row>
<panel>
<html>
<![CDATA[
<style>
.container {
width: 100%;
max-width: 600px;
margin: 0 auto;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.container h1 {
color: #4CAF50;
text-align: center;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
font-weight: bold;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.form-group input[type="datetime-local"] {
padding: 8px;
}
.save-button {
display: block;
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
text-align: center;
font-size: 16px;
}
</style>
<div class="container">
<h1>One-Time-Blackout</h1>
<div class="form-group">
<label for="blackoutFilter">Blackout Filter</label>
<input type="text" id="blackoutFilter" placeholder="Please enter a blackout filter or a blackout filter list separated by commas.">
</div>
<div class="form-group">
<label for="startDate">Start Date and Time</label>
<input type="datetime-local" id="startDate">
</div>
<div class="form-group">
<label for="endDate">End Date and Time</label>
<input type="datetime-local" id="endDate">
</div>
<div class="form-group">
<label for="timeZone">Time Zone</label>
<select id="timeZone">
<option value="UTC+0">UTC +0h</option>
<!-- Add other time zones as needed -->
</select>
</div>
<div class="form-group">
<label for="blackoutActive">Blackout Active</label>
<select id="blackoutActive">
<option value="true">True</option>
<option value="false">False</option>
</select>
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea id="description" placeholder="Additional information about this entry."></textarea>
</div>
<button class="save-button">Save</button>
</div>
]]>
</html>
</panel>
</row>
</dashboard>

O/p looks in text format:

Manual-supression

Please enter the values for your One-Time-Blackout.

<style> .container { width: 100%; max-width: 600px; margin: 0 auto; padding: 20px; background: white; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .container h1 { color: #4CAF50; text-align: center; } .form-group { margin-bottom: 15px; } .form-group label { display: block; font-weight: bold; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; } .form-group input[type="datetime-local"] { padding: 8px; } .save-button { display: block; width: 100%; padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; text-align: center; font-size: 16px; } </style> <div class="container"> <h1>One-Time-Blackout</h1> <div class="form-group"> <label for="blackoutFilter">Blackout Filter</label> <input type="text" id="blackoutFilter" placeholder="Please enter a blackout filter or a blackout filter list separated by commas."> </div> <div class="form-group"> <label for="startDate">Start Date and Time</label> <input type="datetime-local" id="startDate"> </div> <div class="form-group"> <label for="endDate">End Date and Time</label> <input type="datetime-local" id="endDate"> </div> <div class="form-group"> <label for="timeZone">Time Zone</label> <select id="timeZone"> <option value="UTC+0">UTC +0h</option> <!-- Add other time zones as needed --> </select> </div> <div class="form-group"> <label for="blackoutActive">Blackout Active</label> <select id="blackoutActive"> <option value="true">True</option> <option value="false">False</option> </select> </div> <div class="form-group"> <label for="description">Description</label> <textarea id="description" placeholder="Additional information about this entry."></textarea> </div> <button class="save-button">Save</button> </div>

[ITWhisperer]

Remove the CDATA bracketing - it is not required