Give a Specific Part of a Text Component Colour - html

Question

Basically, I have some text with a border as such.
However, I want to achieve something like this, where the top bit has an orange colour and there are icons, how do I do so?
Code:
<div>
<p style="font-family: 'Space Grotesk'; margin-top: 100px; margin-left: 230px; border: 2px solid black; width: 250px; padding-left: 20px; height: 280px; padding-top: 40px; border-radius: 10px;">Awesome product! Works well. Easy to wear, great color scheme, does not tear easily and came home in under two days. Worth every rupee, it really helped me save money from buying the one-time use patches and rubber patches and has been a great experience with the patch.</p>
<hr style="height: 2px; background-color: black; margin-top: -314px; width: 270px; margin-left: 232px; border: none; position: relative;">
<h3 style="font-family: 'Space Grotesk'; margin-top: 230px; margin-left: 350px;">Rishan Reddy</h3>
<h3 style="font-family: 'Space Grotesk'; margin-left: 420px; margin-top: -12px;">Indus</h3>
</div>
Also, I want to make three of these divs side by side. How do I accomplish that?

Answer 1

Use fontawesome for your ellipsis. The header and content can be done as two divs in a container as below. It should be self-explanatory however if not, drop me a comment and I'll elaborate
.container {
border: 2px solid black;
border-radius: 1rem;
width: fit-content;
max-width: 30ch;
overflow: hidden;
min-height:10rem;
}
p {
margin: 0;
}
.header {
font-size: 1.5em;
background-color: #FFBF23;
line-height: 1.5rem;
padding-inline: 1rem;
border-bottom: 2px solid black;
}
.content {
padding: 1.5rem 1rem;
}
.signature-container {
margin-top:0.5rem;
display: flex;
justify-content: flex-end;
}
.review-container {
display:grid;
gap:1rem;
grid-template-columns:repeat(3, fit-content(30ch));
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class='review-container'>
<div class='container'>
<div class='header'>
<i class="fa-solid fa-ellipsis"></i>
</div>
<div class='content'>
<p>This is Review 1</p>
<div class='signature-container'>
<div>
<p>Adam Silver</p>
<p>Ashburn</p>
<p>Virginia</p>
</div>
</div>
</div>
</div>
<div class='container'>
<div class='header'>
<i class="fa-solid fa-ellipsis"></i>
</div>
<div class='content'>
<p>This is Review 2</p>
<div class='signature-container'>
<div>
<p>Adam Silver</p>
<p>Ashburn</p>
<p>Virginia</p>
</div>
</div>
</div>
</div>
<div class='container'>
<div class='header'>
<i class="fa-solid fa-ellipsis"></i>
</div>
<div class='content'>
<p>This is Review 3</p>
<div class='signature-container'>
<div>
<p>Adam Silver</p>
<p>Ashburn</p>
<p>Virginia</p>
</div>
</div>
</div>
</div>
<div class='container'>
<div class='header'>
<i class="fa-solid fa-ellipsis"></i>
</div>
<div class='content'>
<p>This is Review 4</p>
<div class='signature-container'>
<div>
<p>Adam Silver</p>
<p>Ashburn</p>
<p>Virginia</p>
</div>
</div>
</div>
</div>
</div>