Componenti
Sistema di valutazione
Componente del sistema di classificazione della foresta a spaziatura singola
Componente del sistema di classificazione della foresta a spaziatura singola
Un componente del sistema di rating pulito e ispirato al codice con una tavolozza verde bosco, adatto per i portfolio. Dispone di stelle interattive per la valutazione e visualizza le valutazioni medie, completamente reattivo con supporto per la modalità oscura.
Codice HTML
<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>Componenti correlati
Componente del sistema di classificazione
Un componente del sistema di valutazione in stile retrò/vintage progettato con Tailwind CSS, con design reattivo e supporto per temi scuri.
Componente del sistema di classificazione
Un componente del sistema di valutazione reattivo con supporto per il tema scuro, progettato in uno stile minimalista/piatto con una combinazione di colori pastello per le interfacce dei social media. Si tratta di un componente complesso con più elementi interattivi.
Componente del sistema di classificazione retrò
Un componente del sistema di classificazione retrò/vintage con toni della Terra, progettato per siti Web aziendali/aziendali. Supporta il design reattivo e il tema scuro.