Monospace Forest Rating System Component
A clean, code-inspired rating system component with a forest green palette, suitable for portfolios. Features interactive stars for rating and displays average ratings, fully responsive with dark mode support.
HTML Code
<div class="font-mono bg-green-50 text-green-900 min-h-screen p-4 sm:p-8 md:p-12 dark:bg-gray-900 dark:text-green-200 transition-colors duration-300">
<div class="max-w-4xl mx-auto bg-green-100 dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden border border-green-300 dark:border-green-700">
<div class="p-6 sm:p-8 lg:p-10 border-b border-green-200 dark:border-gray-700">
<h2 class="text-2xl sm:text-3xl font-bold text-green-800 dark:text-green-300 mb-2 code-line-prefix ">
<span class="text-green-600 dark:text-emerald-500">$</span> product_rating_system<span class="text-green-600 dark:text-emerald-500">()</span>
</h2>
<p class="text-green-700 dark:text-green-400 text-sm sm:text-base mb-4 code-line-prefix ">
<span class="text-green-600 dark:text-emerald-600">></span> Evaluate product satisfaction based on user feedback.
</p>
<div class="flex flex-col sm:flex-row items-center justify-between py-4 border-t border-b border-green-200 dark:border-gray-700">
<div class="mb-4 sm:mb-0">
<p class="text-lg font-semibold text-green-800 dark:text-green-300 code-line-prefix ">
<span class="text-green-600 dark:text-emerald-500">avg_rating:</span> <span class="text-xl">4.7</span> / <span class="text-sm">5.0</span>
</p>
<div class="flex items-center text-green-600 dark:text-emerald-500 mt-1">
<svg class="w-6 h-6 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
<svg class="w-6 h-6 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
<svg class="w-6 h-6 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
<svg class="w-6 h-6 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
<svg class="w-6 h-6 fill-current text-green-300 dark:text-gray-600" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
<span class="ml-2 text-green-700 dark:text-green-400 text-sm">(<span class="font-bold">128</span> ratings)</span>
</div>
</div>
<div class="flex flex-col items-center">
<p class="text-lg font-semibold text-green-800 dark:text-green-300 mb-2 code-line-prefix ">
<span class="text-green-600 dark:text-emerald-500">$</span> submit_rating<span class="text-green-600 dark:text-emerald-500">()</span>
</p>
<div class="flex text-green-400 dark:text-gray-500 space-x-1">
<button class="star-button focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-green-100 p-1 rounded-sm transition-colors duration-200 hover:text-emerald-500 dark:hover:text-emerald-400" aria-label="1 star">
<svg class="w-8 h-8 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
</button>
<button class="star-button focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-green-100 p-1 rounded-sm transition-colors duration-200 hover:text-emerald-500 dark:hover:text-emerald-400" aria-label="2 stars">
<svg class="w-8 h-8 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
</button>
<button class="star-button focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-green-100 p-1 rounded-sm transition-colors duration-200 hover:text-emerald-500 dark:hover:text-emerald-400" aria-label="3 stars">
<svg class="w-8 h-8 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
</button>
<button class="star-button focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-green-100 p-1 rounded-sm transition-colors duration-200 hover:text-emerald-500 dark:hover:text-emerald-400" aria-label="4 stars">
<svg class="w-8 h-8 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
</button>
<button class="star-button focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-green-100 p-1 rounded-sm transition-colors duration-200 hover:text-emerald-500 dark:hover:text-emerald-400" aria-label="5 stars">
<svg class="w-8 h-8 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
</button>
</div>
</div>
</div>
</div>
<div class="p-6 sm:p-8 lg:p-10">
<h3 class="text-xl sm:text-2xl font-bold text-green-800 dark:text-green-300 mb-4 code-line-prefix ">
<span class="text-green-600 dark:text-emerald-500">$</span> recent_reviews<span class="text-green-600 dark:text-emerald-500">()</span>
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Review 1 -->
<article class="bg-green-50 dark:bg-gray-700 p-5 rounded-lg border border-green-200 dark:border-gray-600 code-block">
<div class="flex items-center mb-3">
<img class="w-10 h-10 rounded-full mr-3 border-2 border-green-400 dark:border-emerald-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div>
<p class="font-semibold text-green-800 dark:text-green-300">[email protected]</p>
<p class="text-green-600 dark:text-green-400 text-sm">2 days ago</p>
</div>
</div>
<div class="flex text-green-600 dark:text-emerald-500 mb-2">
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
</div>
<p class="text-green-700 dark:text-green-400 leading-relaxed text-sm">"Absolutely stellar! This product exceeded all my expectations. The performance is top-notch and the design is incredibly intuitive. Highly recommend!"</p>
</article>
<!-- Review 2 -->
<article class="bg-green-50 dark:bg-gray-700 p-5 rounded-lg border border-green-200 dark:border-gray-600 code-block">
<div class="flex items-center mb-3">
<img class="w-10 h-10 rounded-full mr-3 border-2 border-green-400 dark:border-emerald-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div>
<p class="font-semibold text-green-800 dark:text-green-300">[email protected]</p>
<p class="text-green-600 dark:text-green-400 text-sm">1 week ago</p>
</div>
</div>
<div class="flex text-green-600 dark:text-emerald-500 mb-2">
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
<svg class="w-4 h-4 fill-current text-green-300 dark:text-gray-600" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
</div>
<p class="text-green-700 dark:text-green-400 leading-relaxed text-sm">"Solid product for the price. It does exactly what it promises. One small suggestion: a bit more documentation could be helpful."</p>
</article>
<!-- Review 3 -->
<article class="bg-green-50 dark:bg-gray-700 p-5 rounded-lg border border-green-200 dark:border-gray-600 code-block">
<div class="flex items-center mb-3">
<img class="w-10 h-10 rounded-full mr-3 border-2 border-green-400 dark:border-emerald-600" src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar">
<div>
<p class="font-semibold text-green-800 dark:text-green-300">[email protected]</p>
<p class="text-green-600 dark:text-green-400 text-sm">3 weeks ago</p>
</div>
</div>
<div class="flex text-green-600 dark:text-emerald-500 mb-2">
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
<svg class="w-4 h-4 fill-current text-green-300 dark:text-gray-600" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
</div>
<p class="text-green-700 dark:text-green-400 leading-relaxed text-sm">"Integration was easier than expected. Great tool for data visualization! Some minor bugs, but nothing that breaks the workflow."</p>
</article>
<!-- Review 4 -->
<article class="bg-green-50 dark:bg-gray-700 p-5 rounded-lg border border-green-200 dark:border-gray-600 code-block">
<div class="flex items-center mb-3">
<img class="w-10 h-10 rounded-full mr-3 border-2 border-green-400 dark:border-emerald-600" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
<div>
<p class="font-semibold text-green-800 dark:text-green-300">[email protected]</p>
<p class="text-green-600 dark:text-green-400 text-sm">1 month ago</p>
</div>
</div>
<div class="flex text-green-600 dark:text-emerald-500 mb-2">
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
</div>
<p class="text-green-700 dark:text-green-400 leading-relaxed text-sm">"A game changer for my workflow! The features are incredibly robust and the support has been fantastic. Can't recommend enough."</p>
</article>
</div>
</div>
</div>
</div>
<style>
/* This is for the 'code-line-prefix' which creates the > or $ symbol */
.code-line-prefix::before {
content: ' ';
display: inline-block;
margin-right: 0.5em;
}
.code-line-prefix:not(.code-block) > span:first-child::before {
content: ''; /* Remove prefix if it's explicitly the first span for styling it green */
margin-right: 0;
}
h2.code-line-prefix::before, h3.code-line-prefix::before {
content: '$';
color: var(--tw-color-green-600);
}
.dark h2.code-line-prefix::before, .dark h3.code-line-prefix::before {
color: var(--tw-color-emerald-500);
}
p.code-line-prefix::before {
content: '>';
color: var(--tw-color-green-600);
}
.dark p.code-line-prefix::before {
color: var(--tw-color-emerald-600);
}
/* Simulate interactive star hover/focus for submit rating */
.star-button:focus svg,
.star-button:hover svg {
color: var(--tw-color-emerald-500); /* Applies to light theme */
}
.dark .star-button:focus svg,
.dark .star-button:hover svg {
color: var(--tw-color-emerald-400); /* Applies to dark theme */
}
/* Example of how to 'fill' stars, would typically be done with JS but for static HTML, we use class based */
.star-button:nth-child(1):hover ~ .star-button,
.star-button:nth-child(2):hover ~ .star-button:nth-child(3),
.star-button:nth-child(2):hover ~ .star-button:nth-child(4),
.star-button:nth-child(2):hover ~ .star-button:nth-child(5),
.star-button:nth-child(3):hover ~ .star-button:nth-child(4),
.star-button:nth-child(3):hover ~ .star-button:nth-child(5),
.star-button:nth-child(4):hover ~ .star-button:nth-child(5) {
color: initial; /* Reset color for non-hovered stars */
}
.star-button:hover > svg,
.star-button:hover ~ .star-button svg {
color: inherit; /* Stars before the hovered one */
}
.star-button:hover + .star-button > svg {
color: initial;
}
</style>Related Components
Rating System Component
A rating system component designed in a retro/vintage style, utilizing a complementary color scheme and a complex interface for blog content. This component supports dark mode and is responsive using Tailwind CSS.
Brutalist Rating System Component
A responsive rating system component designed in a brutalism style using Tailwind CSS, with dark theme support.
Rating System Component
A responsive web component for rating items with a skeuomorphic design that mimics real-world counterparts. Suitable for showcasing work or products in a portfolio.