├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── manifest.json └── robots.txt ├── src ├── App.js ├── component │ └── Card.js ├── img │ └── mypic.jpg ├── index.css └── index.js └── tailwind.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

A Simple Testimonial Slider Created

2 |
3 |

Here I presents a simple React Js , Tailwind Css and Swiper Js Testimonial Slider

4 |
5 |

You Can see it on the link here

6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "testt", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.2.0", 10 | "react-dom": "^18.2.0", 11 | "react-icons": "^4.7.1", 12 | "react-scripts": "5.0.1", 13 | "scss": "^0.2.4", 14 | "swiper": "^8.4.5", 15 | "web-vitals": "^2.1.4" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "react-scripts build", 20 | "test": "react-scripts test", 21 | "eject": "react-scripts eject" 22 | }, 23 | "eslintConfig": { 24 | "extends": [ 25 | "react-app", 26 | "react-app/jest" 27 | ] 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | }, 41 | "devDependencies": { 42 | "tailwindcss": "^3.2.4" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vishnubansal001/testimonial-using-ReactJs-TailwindCSS-SwiperJs/e0ac76a007f98cec253296964849d6252fd3bc13/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | Testimonial By VB 15 | 16 | 17 | 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Swiper,SwiperSlide} from 'swiper/react'; 3 | import 'swiper/css'; 4 | import Card from './component/Card'; 5 | import mypic from './img/mypic.jpg'; 6 | import { Navigation, Pagination, A11y } from 'swiper'; 7 | import 'swiper/css/navigation'; 8 | import 'swiper/css/pagination'; 9 | import 'swiper/css/scrollbar'; 10 | 11 | function App() { 12 | return ( 13 |
14 |
15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 |
30 | 31 |
32 |
33 |
34 | 35 |
36 | ); 37 | } 38 | 39 | export default App; 40 | -------------------------------------------------------------------------------- /src/component/Card.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import '../index.css'; 3 | const Card = props=>{ 4 | let {imgSrc} = props.data; 5 | return( 6 |
7 |
8 |
9 | 10 | 11 |
12 | # 13 |
14 |
15 | 16 |
17 |

Lorem, ipsum.

18 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odit, fugit minima natus repudiandae commodi, molestiae et quos nesciunt deleniti ullam autem, sit nihil.

19 | 20 |
21 |
22 |
23 | ); 24 | }; 25 | export default Card; -------------------------------------------------------------------------------- /src/img/mypic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vishnubansal001/testimonial-using-ReactJs-TailwindCSS-SwiperJs/e0ac76a007f98cec253296964849d6252fd3bc13/src/img/mypic.jpg -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | 2 | @tailwind base; 3 | @tailwind components; 4 | @tailwind utilities; 5 | 6 | *{ 7 | margin: 0; 8 | padding: 0; 9 | box-sizing: border-box; 10 | } 11 | body{ 12 | @apply flex items-center justify-center min-h-screen; 13 | background-color: rgba(239, 239, 239, 1); 14 | } 15 | .slide-container{ 16 | @apply px-0 py-10 w-full; 17 | max-width: 1120px; 18 | } 19 | .slide-content{ 20 | @apply my-0 mx-10 overflow-hidden; 21 | border-radius: 25px; 22 | } 23 | .card{ 24 | @apply bg-white; 25 | border-radius: 25px; 26 | } 27 | .image-content,.card-content{ 28 | @apply flex flex-col items-center py-2 px-3; 29 | } 30 | .image-content{ 31 | @apply px-0 py-6 relative; 32 | row-gap: 5px; 33 | } 34 | .overlay{ 35 | @apply h-full absolute top-0 left-0 w-full; 36 | background-color: rgba(64, 112, 244, 1); 37 | border-radius: 25px 25px 0 25px; 38 | } 39 | .overlay::before,.overlay::after{ 40 | @apply h-10 absolute right-0 w-10; 41 | content: ""; 42 | bottom: -40px; 43 | background-color: rgba(64, 112, 244, 1); 44 | } 45 | .overlay::after{ 46 | @apply bg-white; 47 | border-radius: 0 25px 0 0; 48 | } 49 | .card-image{ 50 | @apply bg-white h-40 p-1 relative w-40; 51 | border-radius: 50%; 52 | } 53 | .card-image .card-img{ 54 | @apply border-solid border-4 h-full object-cover w-full; 55 | border-radius: 50%; 56 | border-color: rgba(64, 112, 244, 1); 57 | } 58 | .name{ 59 | @apply font-medium text-lg; 60 | color: rgba(51, 51, 51, 1); 61 | } 62 | .description{ 63 | @apply text-sm text-center; 64 | color: rgba(112, 112, 112, 1); 65 | } 66 | .button{ 67 | @apply rounded-md cursor-pointer text-base m-3 py-2 px-4 text-white; 68 | background-color: rgba(64, 112, 244, 1); 69 | transition: all 0.3s ease; 70 | } 71 | .button:hover{ 72 | background: #265df2; 73 | } 74 | .swiper-navBtn{ 75 | color: #6e93f7; 76 | transition: color 0.3s ease; 77 | } 78 | .swiper-navBtn:hover{ 79 | color: #4070f4; 80 | } 81 | .swiper-navBtn::before,.swiper-navBtn::after{ 82 | font-size: 40px; 83 | } 84 | .swiper-button-next{ 85 | right: 0; 86 | } 87 | .swiper-button-prev{ 88 | left: 0; 89 | } 90 | .swiper-pagination-bullet{ 91 | margin-bottom: 1vh; 92 | background-color: #6e93f7; 93 | opacity: 1; 94 | } 95 | .swiper-pagination-bullet-active{ 96 | background-color: #4070f4; 97 | } 98 | @media screen and (max-width:768px){ 99 | .slide-content{ 100 | margin: 0 10px; 101 | } 102 | .swiper-navBtn{ 103 | display: none; 104 | } 105 | 106 | } 107 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root')); 7 | root.render( 8 | 9 | 10 | 11 | ); 12 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ["./src/**/*.{html,js}"], 3 | theme: { 4 | extend: {}, 5 | }, 6 | plugins: [], 7 | } 8 | --------------------------------------------------------------------------------