Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements.
A comment is like a forum where you can give you feedback.
Example1: This example creating the comment section using Semantic-ui.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<div style="margin-top: 20px" class="ui container">
<div class="ui comments">
<h3 class="ui dividing header">Comments</h3>
<div class="comment">
<a class="avatar">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200509221352/image30.png">
</a>
<div class="content">
<a class="author">Geeksforgeeks</a>
<div class="metadata">
<span class="date">Yesterday at 3:32PM</span>
</div>
<div class="text">
Good Work
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200509221352/image30.png">
</a>
<div class="content">
<a class="author">Rahul</a>
<div class="metadata">
<span class="date">Yesterday at 12:30AM</span>
</div>
<div class="text">
<p>Nice Job, I wish I could do that.</p>
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
<div class="comments">
<div class="comment">
<a class="avatar">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200509221352/image30.png">
</a>
<div class="content">
<a class="author">Rishab</a>
<div class="metadata">
<span class="date">2 Minutes ago</span>
</div>
<div class="text">
Just need some practice.
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200509221352/image30.png">
</a>
<div class="content">
<a class="author">Nitin</a>
<div class="metadata">
<span class="date">3 days ago</span>
</div>
<div class="text">
Loved it!
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
</div>
<form class="ui reply form">
<div class="field">
<textarea spellcheck="false"></textarea>
</div>
<div class="ui blue labeled submit icon button">
<i class="icon edit"></i> Add Reply
</div>
</form>
</div>
</div>
</body>
</html>
Output:
Example2: This example creates the comment section using Semantic-ui.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Comment Types</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
<style>
body{
margin:20px;
}
</style>
</head>
<body>
<div class="ui container">
<hr>
<br>
<div class="ui comments">
<h2 class="ui dividing header">Comments</h2>
<div class="comment">
<a class="avatar">
<img src=
"https://media.geeksforgeeks.org/img-practice/user_web-1598433228.svg">
</a>
<div class="content">
<a class="author">GeeksforGeeks</a>
<div class="text">
Welcome to GeeksforGeeks.
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src=
"https://media.geeksforgeeks.org/img-practice/user_web-1598433228.svg">
</a>
<div class="content">
<a class="author">Krishna</a>
<div class="text">
Thank you so much.
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
</div>
</div>
<form class="ui reply form">
<div class="field">
<textarea spellcheck="false"></textarea>
</div>
<div class="ui blue labeled submit icon button">
<i class="icon edit"></i> Add Reply
</div>
</form>
</div>
</body>
</html>
Output:
