JSFiddle - React, Tailwind, and code Playground
by qunzorez
React
import classes from "./Carousel.module.css";
import Carousel from "react-multi-carousel";
import {
FontAwesomeIcon
} from "@fortawesome/react-fontawesome";
import {
faStar
} from "@fortawesome/free-solid-svg-icons";
import {
faChartBar
} from "@fortawesome/free-solid-svg-icons";
const responsive = {
desktop: {
breakpoint: {
max: 3000,
min: 1024
},
items: 4,
paritialVisibilityGutter: 70
},
tablet: {
breakpoint: {
max: 1024,
min: 464
},
items: 2,
paritialVisibilityGutter: 50
},
mobile: {
breakpoint: {
max: 464,
min: 0
},
items: 1,
paritialVisibilityGutter: 30
}
};
const cardData = {
recommended: {
items: [{
category: "Category",
code: "421313",
title: "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
price: 156,
sold: true,
salePrice: false
},
{
category: "Category2",
code: "421313",
title: "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
price: 156,
sold: false,
salePrice: false
},
{
category: "Category3",
code: "421313",
title: "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
price: 156,
sold: false,
salePrice: false
},
{
category: "Category4",
code: "421313",
title: "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
price: 156,
sold: false,
salePrice: true
},
{
category: "Category5",
code: "421313",
title: "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
price: 156,
sold: false,
salePrice: false
}
],
}
}
const Simple = ({
deviceType
}) => {
return ( <
Carousel ssr partialVisbile deviceType = {
deviceType
...