{"id":2261,"date":"2022-01-25T18:19:30","date_gmt":"2022-01-25T18:19:30","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=2261"},"modified":"2022-01-25T18:19:30","modified_gmt":"2022-01-25T18:19:30","slug":"how-to-build-an-ecommerce-react-template-chapter-1-the-beginning","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=2261","title":{"rendered":"How to Build an Ecommerce React Template &#8211; Chapter 1: The Beginning"},"content":{"rendered":"\n<h2 id=\"8a0a\">Step by step guide on how to build a React Ecommerce template using Tailwind CSS.<\/h2>\n\n\n\n<!--more-->\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/miro.medium.com\/max\/2000\/1*h2tuAkvzR-kP_VnXPl4wow.png\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"4aa3\">I am inspired by the e-commerce product listing&nbsp;<a href=\"https:\/\/github.com\/tailwindtoolbox\/Nordic-Store\" rel=\"noreferrer noopener\" target=\"_blank\">Nordic Store<\/a>&nbsp;template. This template uses&nbsp;<a href=\"https:\/\/tailwindcss.com\/\" rel=\"noreferrer noopener\" target=\"_blank\">Tailwind CSS<\/a>&nbsp;and was created by&nbsp;<a href=\"https:\/\/www.tailwindtoolbox.com\/\" rel=\"noreferrer noopener\" target=\"_blank\">Tailwind Toolbox<\/a><\/p>\n\n\n\n<p id=\"88b2\">The Nordic Store template is a static Tailwind CSS template. So I planned to build a dynamic Nordic Store template with React.<\/p>\n\n\n\n<p id=\"ed6a\">In this blog series, we going to build an eCommerce dynamic template using React and Tailwind CSS.<\/p>\n\n\n\n<h1 id=\"6868\">Why use Tailwind CSS<\/h1>\n\n\n\n<p id=\"db4e\">Tailwind is a utility-first CSS framework for rapidly building custom user interfaces. Simply the utility classes help you to style web applications. So we can do all your styling with help of utility classes and without touch stylesheets.<\/p>\n\n\n\n<p id=\"d4b4\">Also, ready-made components are available on&nbsp;<a href=\"https:\/\/tailwindui.com\/\" rel=\"noreferrer noopener\" target=\"_blank\">Tailwind UI<\/a>.<\/p>\n\n\n\n<h1 id=\"6505\">Chapter 1: The Beginning<\/h1>\n\n\n\n<p id=\"1708\">In this chapter, we going to do the below tasks:<\/p>\n\n\n\n<ul><li>Create a new React app<\/li><li>Installing&nbsp;<a href=\"https:\/\/tailwindcss.com\/\" rel=\"noreferrer noopener\" target=\"_blank\">Tailwind CSS<\/a>&nbsp;and&nbsp;<a href=\"https:\/\/reactrouter.com\/\" rel=\"noreferrer noopener\" target=\"_blank\">React Router<\/a><\/li><li>Installing dependencies<\/li><li>Creating basic layout component<\/li><li>Creating home page<\/li><li>Building Nordic Store static home page<\/li><\/ul>\n\n\n\n<h2 id=\"bcd9\">Create a new React app<\/h2>\n\n\n\n<p id=\"e663\">Create your new React app using&nbsp;<code>create-react-app<\/code><\/p>\n\n\n\n<p id=\"214d\"><code>Terminal<\/code><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">npx create-react-app tailwindcss-nordic-store<br>cd tailwindcss-nordic-store<\/pre>\n\n\n\n<h2 id=\"fec0\">Installing Tailwind CSS and React Router<\/h2>\n\n\n\n<p id=\"fd4a\">The Tailwind CSS installation explained in the Tailwind CSS document&nbsp;<a href=\"https:\/\/tailwindcss.com\/docs\/guides\/create-react-app\" rel=\"noreferrer noopener\" target=\"_blank\">here<\/a><\/p>\n\n\n\n<p id=\"d031\">First, install the&nbsp;<code>tailwindcss<\/code>,&nbsp;<code>postcss<\/code>, and&nbsp;<code>autoprefixer<\/code>and then run the init command to generate both&nbsp;<code>tailwind.config.js<\/code>&nbsp;and&nbsp;<code>postcss.config.js<\/code>.<\/p>\n\n\n\n<p id=\"5fe1\"><code>Terminal<\/code><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">npm install -D tailwindcss postcss autoprefixer<br>npx tailwindcss init -p<\/pre>\n\n\n\n<p id=\"1aec\">Open&nbsp;<code>tailwind.config.js<\/code>&nbsp;file and add all paths of your template files.<\/p>\n\n\n\n<p id=\"4eac\"><code>tailwind.config.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">module.exports = {<br>  content: [<br>    \".\/src\/**\/*.{js,jsx,ts,tsx}\",<br>  ],<br>  theme: {<br>    extend: {},<br>  },<br>  plugins: [],<br>}<\/pre>\n\n\n\n<p id=\"8d74\">Add the&nbsp;<code>@tailwind<\/code>&nbsp;directives for each of Tailwind\u2019s layers to your&nbsp;<code>src\/index.css<\/code>&nbsp;file.<\/p>\n\n\n\n<p id=\"9aef\"><code>src\/index.css<\/code><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">@tailwind base;<br>@tailwind components;<br>@tailwind utilities;<\/pre>\n\n\n\n<p id=\"e9ff\">We successfully installed Tailwind CSS on your app. For dynamic templates we need different pages, so we going to install React Router to your app.<\/p>\n\n\n\n<p id=\"ae2b\"><code>Terminal<\/code><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">npm install react-router-dom@6<\/pre>\n\n\n\n<h2 id=\"1125\">Installing dependencies<\/h2>\n\n\n\n<p id=\"d31f\">The&nbsp;<a href=\"https:\/\/headlessui.dev\/\" rel=\"noreferrer noopener\" target=\"_blank\">Headless UI<\/a>&nbsp;to power all of the interactive behavior and&nbsp;<a href=\"https:\/\/heroicons.com\/\" rel=\"noreferrer noopener\" target=\"_blank\">Heroicons<\/a>&nbsp;for icons, so you\u2019ll need to add these two libraries to your app.<\/p>\n\n\n\n<p id=\"2f37\"><code>Terminal<\/code><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">npm install @headlessui\/react @heroicons\/react<\/pre>\n\n\n\n<h2 id=\"d743\">Creating basic layout component<\/h2>\n\n\n\n<p id=\"a262\">The basic layout creation steps are posted in my earlier blog&nbsp;<a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https:\/\/javascript.plainenglish.io\/create-your-own-layout-component-in-react-5d48f0433d9\">Create Your Own Layout Component in React<\/a>.<a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https:\/\/javascript.plainenglish.io\/create-your-own-layout-component-in-react-5d48f0433d9\">Create Your Own Layout Component in ReactA guide on how to create basic layout components with Header, Footer, and content section.javascript.plainenglish.io<\/a><\/p>\n\n\n\n<p id=\"f6ad\">Download the app and copy the components folder to your&nbsp;<a href=\"https:\/\/github.com\/balajidharma\/react-basic-layout\/archive\/refs\/heads\/master.zip\" rel=\"noreferrer noopener\" target=\"_blank\">https:\/\/github.com\/balajidharma\/react-basic-layout\/archive\/refs\/heads\/master.zip<\/a><\/p>\n\n\n\n<p id=\"17e2\">Update your App.js and include our Layout in your index.js:<\/p>\n\n\n\n<p id=\"53dd\"><code>src\/App.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import '.\/App.css';function App() {<br>  return (<br>    &lt;div className=\"App\"&gt;<br>      Hello world!<br>    &lt;\/div&gt;<br>  );<br>}export default App;<\/pre>\n\n\n\n<p id=\"ce61\"><code>src\/index.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import React from 'react';<br>import ReactDOM from 'react-dom';<br>import '.\/index.css';<br>import App from '.\/App';<br>import Layout from '.\/components\/Layout\/Layout';ReactDOM.render(<br>  &lt;Layout&gt;<br>    &lt;App \/&gt;<br>  &lt;\/Layout&gt;,<br>  document.getElementById('root')<br>);<\/pre>\n\n\n\n<p id=\"3465\">Now start your app and see the basic Header, Footer, and Content section of the browser.<\/p>\n\n\n\n<p id=\"d5ff\"><code>Terminal<\/code><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">npm start<\/pre>\n\n\n\n<p id=\"6340\"><code>Browser<\/code><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/miro.medium.com\/max\/557\/1*XffAR57jidPLH-7fbRuF9Q.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 id=\"66ea\">Creating Home Page<\/h2>\n\n\n\n<p id=\"9d39\">Time to create our page using React Router. Create a new&nbsp;<code>pages<\/code>&nbsp;folder under the&nbsp;<code>src<\/code>&nbsp;folder. Create&nbsp;<code>Home<\/code>&nbsp;component inside the&nbsp;<code>pages<\/code>&nbsp;folder<\/p>\n\n\n\n<p id=\"5902\"><code>src\/pages\/Home.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import React from 'react';class Home extends React.Component {<br>  render() {<br>    return (<br>      &lt;div&gt;<br>        Home page<br>      &lt;\/div&gt;<br>    );<br>  }<br>}export default Home;<\/pre>\n\n\n\n<p id=\"a02b\">React&nbsp;<code>class<\/code>&nbsp;component used for our app. Read more about React component&nbsp;<a href=\"https:\/\/reactjs.org\/docs\/components-and-props.html\" rel=\"noreferrer noopener\" target=\"_blank\">here<\/a>.<\/p>\n\n\n\n<p id=\"d6b6\">Include React Router and Home page as a&nbsp;<code>index.js<\/code>&nbsp;file. Also, we going to remove&nbsp;<code>app.js<\/code>.<\/p>\n\n\n\n<p id=\"4512\"><code>src\/index.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import React from 'react';<br>import ReactDOM from 'react-dom';<br>import { BrowserRouter, Routes, Route } from \"react-router-dom\";<br>import '.\/index.css';<br>import Layout from '.\/components\/Layout\/Layout';<br>import Home from '.\/pages\/Home';ReactDOM.render(<br>  &lt;BrowserRouter&gt;<br>    &lt;Layout&gt;<br>      &lt;Routes&gt;<br>        &lt;Route path=\"\/\" element={&lt;Home\/&gt;} \/&gt;<br>      &lt;\/Routes&gt;<br>    &lt;\/Layout&gt;<br>  &lt;\/BrowserRouter&gt;,<br>  document.getElementById('root')<br>);<\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/miro.medium.com\/max\/700\/1*uNRdka_24vOy1bDXSg9r2Q.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 id=\"83ab\">Building Nordic Store static home page<\/h2>\n\n\n\n<p id=\"e3c1\">We almost completed the basic setup. We split the&nbsp;<a href=\"https:\/\/github.com\/tailwindtoolbox\/Nordic-Store\" rel=\"noreferrer noopener\" target=\"_blank\">Nordic Store<\/a>&nbsp;template into Header, Footer, and Home sections in your app.<\/p>\n\n\n\n<p id=\"70f6\"><code>src\/components\/Layout\/Header\/Header.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import React from \"react\";<br>class Header extends React.Component {<br>  render() {<br>    return (<br>      &lt;header&gt;<br>        &lt;nav id=\"header\" className=\"w-full z-30 top-0 py-1\"&gt;<br>          &lt;div className=\"w-full container mx-auto flex flex-wrap items-center justify-between mt-0 px-6 py-3\"&gt;&lt;label htmlFor=\"menu-toggle\" className=\"cursor-pointer md:hidden block\"&gt;<br>              &lt;svg className=\"fill-current text-gray-900\" xmlns=\"<a href=\"http:\/\/www.w3.org\/2000\/svg\" rel=\"noreferrer noopener\" target=\"_blank\">http:\/\/www.w3.org\/2000\/svg<\/a>\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"&gt;<br>                &lt;title&gt;menu&lt;\/title&gt;<br>                &lt;path d=\"M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z\"&gt;&lt;\/path&gt;<br>              &lt;\/svg&gt;<br>            &lt;\/label&gt;<br>            &lt;input className=\"hidden\" type=\"checkbox\" id=\"menu-toggle\" \/&gt;&lt;div className=\"hidden md:flex md:items-center md:w-auto w-full order-3 md:order-1\" id=\"menu\"&gt;<br>              &lt;nav&gt;<br>                &lt;ul className=\"md:flex items-center justify-between text-base text-gray-700 pt-4 md:pt-0\"&gt;<br>                  &lt;li&gt;&lt;a className=\"inline-block no-underline hover:text-black hover:underline py-2 px-4\" href=\"#\"&gt;Shop&lt;\/a&gt;&lt;\/li&gt;<br>                  &lt;li&gt;&lt;a className=\"inline-block no-underline hover:text-black hover:underline py-2 px-4\" href=\"#\"&gt;About&lt;\/a&gt;&lt;\/li&gt;<br>                &lt;\/ul&gt;<br>              &lt;\/nav&gt;<br>            &lt;\/div&gt;&lt;div className=\"order-1 md:order-2\"&gt;<br>              &lt;a className=\"flex items-center tracking-wide no-underline hover:no-underline font-bold text-gray-800 text-xl \" href=\"#\"&gt;<br>                &lt;svg className=\"fill-current text-gray-800 mr-2\" xmlns=\"<a href=\"http:\/\/www.w3.org\/2000\/svg\" rel=\"noreferrer noopener\" target=\"_blank\">http:\/\/www.w3.org\/2000\/svg<\/a>\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"&gt;<br>                  &lt;path d=\"M5,22h14c1.103,0,2-0.897,2-2V9c0-0.553-0.447-1-1-1h-3V7c0-2.757-2.243-5-5-5S7,4.243,7,7v1H4C3.447,8,3,8.447,3,9v11 C3,21.103,3.897,22,5,22z M9,7c0-1.654,1.346-3,3-3s3,1.346,3,3v1H9V7z M5,10h2v2h2v-2h6v2h2v-2h2l0.002,10H5V10z\" \/&gt;<br>                &lt;\/svg&gt;<br>                NORDICS<br>              &lt;\/a&gt;<br>            &lt;\/div&gt;&lt;div className=\"order-2 md:order-3 flex items-center\" id=\"nav-content\"&gt;&lt;a className=\"inline-block no-underline hover:text-black\" href=\"#\"&gt;<br>                &lt;svg className=\"fill-current hover:text-black\" xmlns=\"<a href=\"http:\/\/www.w3.org\/2000\/svg\" rel=\"noreferrer noopener\" target=\"_blank\">http:\/\/www.w3.org\/2000\/svg<\/a>\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"&gt;<br>                  &lt;circle fill=\"none\" cx=\"12\" cy=\"7\" r=\"3\" \/&gt;<br>                  &lt;path d=\"M12 2C9.243 2 7 4.243 7 7s2.243 5 5 5 5-2.243 5-5S14.757 2 12 2zM12 10c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3S13.654 10 12 10zM21 21v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h2v-1c0-2.757 2.243-5 5-5h4c2.757 0 5 2.243 5 5v1H21z\" \/&gt;<br>                &lt;\/svg&gt;<br>              &lt;\/a&gt;&lt;a className=\"pl-3 inline-block no-underline hover:text-black\" href=\"#\"&gt;<br>                &lt;svg className=\"fill-current hover:text-black\" xmlns=\"<a href=\"http:\/\/www.w3.org\/2000\/svg\" rel=\"noreferrer noopener\" target=\"_blank\">http:\/\/www.w3.org\/2000\/svg<\/a>\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"&gt;<br>                  &lt;path d=\"M21,7H7.462L5.91,3.586C5.748,3.229,5.392,3,5,3H2v2h2.356L9.09,15.414C9.252,15.771,9.608,16,10,16h8 c0.4,0,0.762-0.238,0.919-0.606l3-7c0.133-0.309,0.101-0.663-0.084-0.944C21.649,7.169,21.336,7,21,7z M17.341,14h-6.697L8.371,9 h11.112L17.341,14z\" \/&gt;<br>                  &lt;circle cx=\"10.5\" cy=\"18.5\" r=\"1.5\" \/&gt;<br>                  &lt;circle cx=\"17.5\" cy=\"18.5\" r=\"1.5\" \/&gt;<br>                &lt;\/svg&gt;<br>              &lt;\/a&gt;&lt;\/div&gt;<br>          &lt;\/div&gt;<br>        &lt;\/nav&gt;<br>      &lt;\/header&gt;<br>    );<br>  }<br>}<br>export default Header;<\/pre>\n\n\n\n<p id=\"03b2\">Make sure while coping change the&nbsp;<code>class&nbsp;<\/code>to&nbsp;<code>className&nbsp;<\/code>and&nbsp;<code>for&nbsp;<\/code>to&nbsp;<code>htmlFor<\/code>. Also, ignore the valid&nbsp;<code>href&nbsp;<\/code>warnings:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/miro.medium.com\/max\/700\/1*M6roJ-RnYiqQaQNfaaEzWg.png\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"bd6f\"><code>src\/components\/Layout\/Footer\/Footer.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import React from \"react\";<br>class Footer extends React.Component {<br>  render() {<br>    return (<br>      &lt;footer className=\"container mx-auto bg-white py-8 border-t border-gray-400\"&gt;<br>        &lt;div className=\"container flex px-3 py-8 \"&gt;<br>          &lt;div className=\"w-full mx-auto flex flex-wrap\"&gt;<br>            &lt;div className=\"flex w-full lg:w-1\/2 \"&gt;<br>              &lt;div className=\"px-3 md:px-0\"&gt;<br>                &lt;h3 className=\"font-bold text-gray-900\"&gt;About&lt;\/h3&gt;<br>                &lt;p className=\"py-4\"&gt;<br>                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel mi ut felis tempus commodo nec id erat. Suspendisse consectetur dapibus velit ut lacinia.<br>                &lt;\/p&gt;<br>              &lt;\/div&gt;<br>            &lt;\/div&gt;<br>            &lt;div className=\"flex w-full lg:w-1\/2 lg:justify-end lg:text-right\"&gt;<br>              &lt;div className=\"px-3 md:px-0\"&gt;<br>                &lt;h3 className=\"font-bold text-gray-900\"&gt;Social&lt;\/h3&gt;<br>                &lt;ul className=\"list-reset items-center pt-3\"&gt;<br>                  &lt;li&gt;<br>                    &lt;a className=\"inline-block no-underline hover:text-black hover:underline py-1\" href=\"#\"&gt;Add social links&lt;\/a&gt;<br>                  &lt;\/li&gt;<br>                &lt;\/ul&gt;<br>              &lt;\/div&gt;<br>            &lt;\/div&gt;<br>          &lt;\/div&gt;<br>        &lt;\/div&gt;<br>      &lt;\/footer&gt;<br>    );<br>  }<br>}<br>export default Footer;<\/pre>\n\n\n\n<p id=\"d496\"><code>src\/pages\/Home.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import React from 'react';const products = [<br>  {<br>    id: 1,<br>    name: 'Product Name',<br>    href: '#',<br>    price: '$9.99',<br>    imageSrc: '<a href=\"https:\/\/images.unsplash.com\/photo-1555982105-d25af4182e4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=400&amp;h=400&amp;q=80%27\" rel=\"noreferrer noopener\" target=\"_blank\">https:\/\/images.unsplash.com\/photo-1555982105-d25af4182e4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=400&amp;h=400&amp;q=80'<\/a>,<br>  },<br>  {<br>    id: 2,<br>    name: 'Product Name',<br>    href: '#',<br>    price: '$10.99',<br>    imageSrc: '<a href=\"https:\/\/images.unsplash.com\/photo-1508423134147-addf71308178?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=400&amp;h=400&amp;q=80%27\" rel=\"noreferrer noopener\" target=\"_blank\">https:\/\/images.unsplash.com\/photo-1508423134147-addf71308178?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=400&amp;h=400&amp;q=80'<\/a>,<br>  },<br>  {<br>    id: 3,<br>    name: 'Product Name',<br>    href: '#',<br>    price: '$12.99',<br>    imageSrc: '<a href=\"https:\/\/images.unsplash.com\/photo-1449247709967-d4461a6a6103?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=400&amp;h=400&amp;q=80%27\" rel=\"noreferrer noopener\" target=\"_blank\">https:\/\/images.unsplash.com\/photo-1449247709967-d4461a6a6103?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=400&amp;h=400&amp;q=80'<\/a>,<br>  },<br>  {<br>    id: 4,<br>    name: 'Product Name',<br>    href: '#',<br>    price: '$9.99',<br>    imageSrc: '<a href=\"https:\/\/images.unsplash.com\/reserve\/LJIZlzHgQ7WPSh5KVTCB_Typewriter.jpg?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=400&amp;h=400&amp;q=80%27\" rel=\"noreferrer noopener\" target=\"_blank\">https:\/\/images.unsplash.com\/reserve\/LJIZlzHgQ7WPSh5KVTCB_Typewriter.jpg?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=400&amp;h=400&amp;q=80'<\/a>,<br>  },<br>  {<br>    id: 5,<br>    name: 'Product Name',<br>    href: '#',<br>    price: '$6.99',<br>    imageSrc: '<a href=\"https:\/\/images.unsplash.com\/photo-1467949576168-6ce8e2df4e13?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=400&amp;h=400&amp;q=80%27\" rel=\"noreferrer noopener\" target=\"_blank\">https:\/\/images.unsplash.com\/photo-1467949576168-6ce8e2df4e13?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=400&amp;h=400&amp;q=80'<\/a>,<br>  },<br>  {<br>    id: 6,<br>    name: 'Product Name',<br>    href: '#',<br>    price: '$10.99',<br>    imageSrc: '<a href=\"https:\/\/images.unsplash.com\/photo-1544787219-7f47ccb76574?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=400&amp;h=400&amp;q=80%27\" rel=\"noreferrer noopener\" target=\"_blank\">https:\/\/images.unsplash.com\/photo-1544787219-7f47ccb76574?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=400&amp;h=400&amp;q=80'<\/a>,<br>  },<br>  {<br>    id: 7,<br>    name: 'Product Name',<br>    href: '#',<br>    price: '$22.99',<br>    imageSrc: '<a href=\"https:\/\/images.unsplash.com\/photo-1550837368-6594235de85c?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=400&amp;h=400&amp;q=80%27\" rel=\"noreferrer noopener\" target=\"_blank\">https:\/\/images.unsplash.com\/photo-1550837368-6594235de85c?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=400&amp;h=400&amp;q=80'<\/a>,<br>  },<br>  {<br>    id: 8,<br>    name: 'Product Name',<br>    href: '#',<br>    price: '$19.99',<br>    imageSrc: '<a href=\"https:\/\/images.unsplash.com\/photo-1551431009-a802eeec77b1?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=400&amp;h=400&amp;q=80%27\" rel=\"noreferrer noopener\" target=\"_blank\">https:\/\/images.unsplash.com\/photo-1551431009-a802eeec77b1?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=400&amp;h=400&amp;q=80'<\/a>,<br>  },<br>]class Home extends React.Component {<br>  render() {<br>    return (<br>      &lt;div&gt;&lt;section className=\"bg-white py-8\"&gt;&lt;div className=\"container mx-auto flex items-center flex-wrap pt-4 pb-12\"&gt;&lt;nav id=\"store\" className=\"w-full z-30 top-0 px-6 py-1\"&gt;<br>              &lt;div className=\"w-full container mx-auto flex flex-wrap items-center justify-between mt-0 px-2 py-3\"&gt;&lt;a className=\"uppercase tracking-wide no-underline hover:no-underline font-bold text-gray-800 text-xl \" href=\"#\"&gt;<br>                  Store<br>                &lt;\/a&gt;&lt;div className=\"flex items-center\" id=\"store-nav-content\"&gt;&lt;a className=\"pl-3 inline-block no-underline hover:text-black\" href=\"#\"&gt;<br>                    &lt;svg className=\"fill-current hover:text-black\" xmlns=\"<a href=\"http:\/\/www.w3.org\/2000\/svg\" rel=\"noreferrer noopener\" target=\"_blank\">http:\/\/www.w3.org\/2000\/svg<\/a>\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"&gt;<br>                      &lt;path d=\"M7 11H17V13H7zM4 7H20V9H4zM10 15H14V17H10z\" \/&gt;<br>                    &lt;\/svg&gt;<br>                  &lt;\/a&gt;&lt;a className=\"pl-3 inline-block no-underline hover:text-black\" href=\"#\"&gt;<br>                    &lt;svg className=\"fill-current hover:text-black\" xmlns=\"<a href=\"http:\/\/www.w3.org\/2000\/svg\" rel=\"noreferrer noopener\" target=\"_blank\">http:\/\/www.w3.org\/2000\/svg<\/a>\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"&gt;<br>                      &lt;path d=\"M10,18c1.846,0,3.543-0.635,4.897-1.688l4.396,4.396l1.414-1.414l-4.396-4.396C17.365,13.543,18,11.846,18,10 c0-4.411-3.589-8-8-8s-8,3.589-8,8S5.589,18,10,18z M10,4c3.309,0,6,2.691,6,6s-2.691,6-6,6s-6-2.691-6-6S6.691,4,10,4z\" \/&gt;<br>                    &lt;\/svg&gt;<br>                  &lt;\/a&gt;&lt;\/div&gt;<br>              &lt;\/div&gt;<br>            &lt;\/nav&gt;&lt;div className=\"grid grid-cols-1 gap-y-10 sm:grid-cols-2 gap-x-6 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8\"&gt;<br>              {products.map((product) =&gt; (<br>                &lt;a key={product.id} href={product.href}&gt;<br>                  &lt;img className=\"hover:grow hover:shadow-lg\" src={product.imageSrc} \/&gt;<br>                  &lt;div className=\"pt-3 flex items-center justify-between\"&gt;<br>                    &lt;p className=\"\"&gt;{product.name}&lt;\/p&gt;<br>                    &lt;svg className=\"h-6 w-6 fill-current text-gray-500 hover:text-black\" xmlns=\"<a href=\"http:\/\/www.w3.org\/2000\/svg\" rel=\"noreferrer noopener\" target=\"_blank\">http:\/\/www.w3.org\/2000\/svg<\/a>\" viewBox=\"0 0 24 24\"&gt;<br>                      &lt;path d=\"M12,4.595c-1.104-1.006-2.512-1.558-3.996-1.558c-1.578,0-3.072,0.623-4.213,1.758c-2.353,2.363-2.352,6.059,0.002,8.412 l7.332,7.332c0.17,0.299,0.498,0.492,0.875,0.492c0.322,0,0.609-0.163,0.792-0.409l7.415-7.415 c2.354-2.354,2.354-6.049-0.002-8.416c-1.137-1.131-2.631-1.754-4.209-1.754C14.513,3.037,13.104,3.589,12,4.595z M18.791,6.205 c1.563,1.571,1.564,4.025,0.002,5.588L12,18.586l-6.793-6.793C3.645,10.23,3.646,7.776,5.205,6.209 c0.76-0.756,1.754-1.172,2.799-1.172s2.035,0.416,2.789,1.17l0.5,0.5c0.391,0.391,1.023,0.391,1.414,0l0.5-0.5 C14.719,4.698,17.281,4.702,18.791,6.205z\" \/&gt;<br>                    &lt;\/svg&gt;<br>                  &lt;\/div&gt;<br>                  &lt;p className=\"pt-1 text-gray-900\"&gt;{product.price}&lt;\/p&gt;<br>                &lt;\/a&gt;<br>              ))}<br>            &lt;\/div&gt;&lt;\/div&gt;&lt;\/section&gt;&lt;\/div&gt;<br>    );<br>  }<br>}export default Home;<\/pre>\n\n\n\n<p id=\"cb4f\">We created a home page without a carousel. We will implement the carousel in the upcoming chapter.<\/p>\n\n\n\n<p id=\"1187\">Add below style for mobile menu.<\/p>\n\n\n\n<p id=\"c6ab\"><code>src\/index.css<\/code><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><a href=\"http:\/\/twitter.com\/tailwind\" rel=\"noreferrer noopener\" target=\"_blank\">@tailwind<\/a> base;<br><a href=\"http:\/\/twitter.com\/tailwind\" rel=\"noreferrer noopener\" target=\"_blank\">@tailwind<\/a> components;<br><a href=\"http:\/\/twitter.com\/tailwind\" rel=\"noreferrer noopener\" target=\"_blank\">@tailwind<\/a> utilities;#menu-toggle:checked + #menu {<br>  display: block;<br>}<\/pre>\n\n\n\n<p id=\"796c\">The complete working code of this chapter is pushed and available on Github \u2014&nbsp;<a href=\"https:\/\/github.com\/balajidharma\/tailwindcss-nordic-store\/tree\/Chapter_1\" rel=\"noreferrer noopener\" target=\"_blank\">https:\/\/github.com\/balajidharma\/tailwindcss-nordic-store\/tree\/Chapter_1<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/miro.medium.com\/max\/700\/1*qTfI3fVpujMVq4QABGFcIw.png\" alt=\"\"\/><figcaption>Chapter 1 \u2014 Final output<\/figcaption><\/figure>\n\n\n\n<p id=\"4b25\">That concludes our first chapter. Thank you for reading.<\/p>\n\n\n\n<p id=\"2513\">Stay tuned for more!<\/p>\n\n\n\n<p id=\"fe65\"><em>More content at&nbsp;<\/em><a href=\"http:\/\/plainenglish.io\/\" rel=\"noreferrer noopener\" target=\"_blank\"><em>plainenglish.io<\/em><\/a><em>. Sign up for our&nbsp;<\/em><a href=\"http:\/\/newsletter.plainenglish.io\/\" rel=\"noreferrer noopener\" target=\"_blank\"><em>free weekly newsletter<\/em><\/a><em>. Get exclusive access to writing opportunities and advice in our&nbsp;<\/em><a href=\"https:\/\/discord.gg\/GtDtUAvyhW\" rel=\"noreferrer noopener\" target=\"_blank\"><em>community Discord<\/em><\/a><em>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Step by step guide on how to build a React Ecommerce template using Tailwind CSS.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[180,65],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2261"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2261"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2261\/revisions"}],"predecessor-version":[{"id":2262,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2261\/revisions\/2262"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2261"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2261"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}