На большинстве сайтов используются отзывы пользователей. Очень часто их нужно оформлять красиво и броско, чтобы они повышали доверие к сайту/продавцу/компании. Кроме того, на других сайтах нужно оформлять цитаты. И в этих случаях пригодятся варианты кода, которые вы найдете ниже.
Все примеры кода вы можете найти как непосредственно на этой странице, так и на ресурсе codepen.io. Для этого нажмите на кнопку 
и перейдите к редактированию кода.
Оформление отзывов
Простой отзыв с кавычкми
See the Pen Simple Review by HTML-plus (@ambassador) on CodePen.
Несколько вариантов оформления отзывов в одном стиле от taviskaron
" user="taviskaron01"]See the Pen #05, 06, 07 Blockquotes/Testimonials, Quote Blocks [HTML + CSS] by taviskaron (@taviskaron01) on CodePen.
Список отзывов от George Gabriel
See the Pen Dark Themed Review Card with Filter and Tags by George Gabriel (@ggluta) on CodePen.
Слайдеры с отзывами
Отзывы на основе Bootstrap и Owl-carousel от Aashima Jain
See the Pen Client Review by Aashima Jain (@Aashima) on CodePen.
Интересный дизайн с фото пользователей. Здесь тоже используется Bootstrap и Owl-carousel.
See the Pen Testimonial (Client-Review) by HTML-plus (@ambassador) on CodePen.
Оформление отзывов треугольниками.
See the Pen Testimonial by Aashima Jain (@Aashima) on CodePen.
Оформление в виде блоков с текстом.
See the Pen Our Client Review by Aashima Jain (@Aashima) on CodePen.
Еще один слайдер с помощью Owl-carousel с отзывами, в том числе с кнопкой для проигрывания видео-отзыва.
See the Pen Client Review / Testimonial Section Design by Yeasin Arafat (@yeasinarafat) on CodePen.
Яркие отзывы от Musa Yazlık на основе Owl-carousel
See the Pen Owl Carousel Customer Reviews Area by Musa Yazlık (@musayazlik) on CodePen.
Другие слайдеры для отзывов
See the Pen Reviews - 3d Slider by Pradip Shrestha (@meprap) on CodePen.
Отзывы с фото известных людей, которые лучше использовать для цитат. Автор Nathan S.R.
See the Pen Reviews / Testimonials / Quotes / Info With Carousel / Slider by Nathan S.R. (@nathan-sr) on CodePen.
Отзывы с фото на основе slick-carousel
See the Pen reviews slider by mrnobody (@corvus-007) on CodePen.
Отзывы на основе массива объектов
See the Pen Carousel / reviews component by HTML-plus (@ambassador) on CodePen.
Оформление цитат
Простая цитата от Lukas Dietrich
See the Pen simple blockquote by HTML-plus (@ambassador) on CodePen.
Еще одна простая цитата от Joe Hastings
See the Pen Quote styling by Joe Hastings (@JoeHastings) on CodePen.
Цитата с треугольниками от Bruce Brotherton
See the Pen Some quote or something by Bruce Brotherton (@brucebrotherton) on CodePen.
Стиль цитат от Catalin Rosu
See the Pen Quote styles by Catalin Rosu (@catalinred) on CodePen.
2 варианта оформления цитат от Jaime
See the Pen Quotes with Font Awesome and pseudo elements by Jaime (@jimmycow) on CodePen.
Несколько вариантов цитат от Rases Kühlewein
See the Pen Blockquote & Cite V2 by Rases Kühlewein (@Rases) on CodePen.
3 варианта блоков с цитатами от Mark Boots
See the Pen Quote cards by Mark Boots (@MarkBoots) on CodePen.
Цитата с боковой скобкой Rory Kasasagi
See the Pen Pull Quotes | cpcm23w3 by Rory Kasasagi (@mugosagi) on CodePen.
Боковая круглая скобка для цитаты от Vero
See the Pen blockquote stylée littéraire by Vero (@kami441) on CodePen.
Цитата-выноска от Brian Haferkamp
See the Pen Responsive Pull Quote by Brian Haferkamp (@brianhaferkamp) on CodePen.
Еще один вариант от John Fink
See the Pen Pure CSS Blockquote by John Fink (@johnfinkdesign) on CodePen.
Броская цитата от Josetxu
See the Pen Simple Blockquotes by Josetxu (@josetxu) on CodePen.
И еще одна крупная броская цитата от DariyGRAY
See the Pen Stylish Blockquote by DariyGRAY (@DariyGRAY) on CodePen.
Цитата с фотографией от Sicontis
See the Pen Codepen Challenge: Quote Poster by Sicontis (@Sicontis) on CodePen.
Дрожащая цитата от Rory Kasasagi
See the Pen The Typography of Quotes | cpcm23w1 by Rory Kasasagi (@mugosagi) on CodePen.
Броская цитата от Jacob Lett
See the Pen Coffee Quote - blockquote, flexbox, rgba, before content by Jacob Lett (@JacobLett) on CodePen.
Элегантная цитата от Juan Pablo
See the Pen Quote: Jared Spool • Web Site Usability: A Designer's Guide by Juan Pablo (@jupago) on CodePen.
Крупный текст для цитаты от того же автора
See the Pen Quote: Steven Pressfield • Start before you are ready by Juan Pablo (@jupago) on CodePen.
Цитата с анимацией при наведении от abdel Rhman
See the Pen CSS Quote Box Hover Effects by abdel Rhman (@abdelRhman345) on CodePen.
Анимация появления текста внутри цитаты от 14islands
See the Pen Quote Effect using a CSS Blur Filter by 14islands (@14islands) on CodePen.
Цитата с анимацией воды от Shane Burns
Очень необычное оформление цитаты.
See the Pen Become the Cup by Shane Burns (@mcShane) on CodePen.
Круглая цитата от Kerry
See the Pen HTML text inside a circle shape by Kerry (@Kerrys7777) on CodePen.
Стильная цитата от Sabine Robart
See the Pen Quote cards by Sabine Robart (@_Sabine) on CodePen.
Цитаты в стиле Material Design от Bharani
See the Pen Material Quotation Cards by Bharani (@bharanim) on CodePen.
Слайдер с цитатами и фото от Mohan Khadka
See the Pen Day 007 Author Quote by Mohan Khadka (@khadkamhn) on CodePen.
Оформление комментариев
Комментарии - это тоже своего рода отзывы или цитаты, поэтому их тоже нужно красиво оформлять.
Вариант в 2 колонки с фото/аватарами от Sitesoch
See the Pen Customer Review by Sitesoch (@sitesoch) on CodePen.
Вариант комментариев от разных пользователей
See the Pen Cards-Reviews by HTML-plus (@ambassador) on CodePen.
Древовидные комментарии от Agustin Ortiz
See the Pen Comments Box / List | Lista de Comentarios by Agustin Ortiz (@Creaticode) on CodePen.
Комментарии в виде карточек от Shaw
See the Pen Comment Card Animation by Shaw (@shshaw) on CodePen.
