Rich-React

React js UI example. Product comparison

React js UI example and template, Product comparison! . Take a look at this UI example and see how it can enhance your project. Your can copy or download the code and use it in your project. Don't forget to browse our library of other free React Native templates for even more design and functionality inspiration. Happy coding!
Tags: Product,comparison

Preview Code

1. First, we need fresh reactjs setup, and for that, we need to run below commands into out terminal, and also we should have latest node version installed on our system:

npx create-react-app my-awesome-project

cd my-awesome-project

npm start

2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:

npm install [email protected] --save

npm start //For start project again

3. Finally for the main output, we need to add below code into our my-awesome-project/src/App.js file or if you have fresh setup then you can replace my-awesome-project/src/App.js file code with below code:

import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';


function App() {
  
	return (
		<div>
			<div class="container pb-5 mb-2">
    <div class="comparison-table">
        <table class="table table-bordered">
            <thead class="bg-secondary">
                <tr>
                    <td class="align-middle">
                        <select class="form-control custom-select" id="compare-criteria" data-filter="trigger">
                            <option value="all">Comparison criteria *</option>
                            <option value="summary">Summary</option>
                            <option value="general">General</option>
                            <option value="multimedia">Multimedia</option>
                            <option value="performance">Performance</option>
                            <option value="design">Design</option>
                            <option value="display">Display</option>
                            <option value="storage">Storage</option>
                            <option value="camera">Camera</option>
                            <option value="battery">Battery</option>
                            <option value="price">Price &amp; rating</option>
                        </select><small class="form-text text-muted">* Choose criteria to filter table below.</small>
                        <div class="pt-3">
                            <div class="custom-control custom-checkbox">
                                <input class="custom-control-input" type="checkbox" id="differences"/>
                                <label class="custom-control-label" for="differences">Show differences only</label>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="comparison-item"><span class="remove-item"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></span>
                            <a class="comparison-item-thumb" href="shop-single.html"><img src="https://www.bootdey.com/image/160x160/FF0000/000000" alt="Apple iPhone Xs Max"/></a><a class="comparison-item-title" href="shop-single.html">Apple iPhone Xs Max</a>
                            <button class="btn btn-pill btn-outline-primary btn-sm" type="button" data-toggle="toast" data-target="#cart-toast">Add to Cart</button>
                        </div>
                    </td>
                    <td>
                        <div class="comparison-item"><span class="remove-item"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></span>
                            <a class="comparison-item-thumb" href="shop-single.html"><img src="https://www.bootdey.com/image/160x160/1E90FF/000000" alt="Google Pixel 3 XL"/></a><a class="comparison-item-title" href="shop-single.html">Google Pixel 3 XL</a>
                            <button class="btn btn-pill btn-outline-primary btn-sm" type="button" data-toggle="toast" data-target="#cart-toast">Add to Cart</button>
                        </div>
                    </td>
                    <td>
                        <div class="comparison-item"><span class="remove-item"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></span>
                            <a class="comparison-item-thumb" href="shop-single.html"><img src="https://www.bootdey.com/image/160x160/FF8C00/000000" alt="Samsung Galaxy S10+"/></a><a class="comparison-item-title" href="shop-single.html">Samsung Galaxy S10+</a>
                            <button class="btn btn-pill btn-outline-primary btn-sm" type="button" data-toggle="toast" data-target="#cart-toast">Add to Cart</button>
                        </div>
                    </td>
                </tr>
            </thead>
            <tbody id="summary" data-filter="target">
                <tr class="bg-secondary">
                    <th class="text-uppercase">Summary</th>
                    <td><span class="text-dark font-weight-semibold">Apple iPhone Xs Max</span></td>
                    <td><span class="text-dark font-weight-semibold">Google Pixel 3 XL</span></td>
                    <td><span class="text-dark font-weight-semibold">Samsung Galaxy S10+</span></td>
                </tr>
                <tr>
                    <th>Performance</th>
                    <td>Hexa Core</td>
                    <td>Octa Core</td>
                    <td>Octa Core</td>
                </tr>
                <tr>
                    <th>Display</th>
                    <td>6.5-inch</td>
                    <td>6.3-inch</td>
                    <td>6.4-inch</td>
                </tr>
                <tr>
                    <th>Storage</th>
                    <td>64 GB</td>
                    <td>64 GB</td>
                    <td>128 GB</td>
                </tr>
                <tr>
                    <th>Camera</th>
                    <td>Dual 12-megapixel</td>
                    <td>12.2-megapixel</td>
                    <td>12,16,12-megapixel</td>
                </tr>
                <tr>
                    <th>Battery</th>
                    <td>3,174 mAh</td>
                    <td>3,430 mAh</td>
                    <td>4,100 mAh</td>
                </tr>
            </tbody>
            <tbody id="general" data-filter="target">
                <tr class="bg-secondary">
                    <th class="text-uppercase">General</th>
                    <td><span class="text-dark font-weight-semibold">Apple iPhone Xs Max</span></td>
                    <td><span class="text-dark font-weight-semibold">Google Pixel 3 XL</span></td>
                    <td><span class="text-dark font-weight-semibold">Samsung Galaxy S10+</span></td>
                </tr>
                <tr>
                    <th>Quick charging</th>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                </tr>
                <tr>
                    <th>Operating system</th>
                    <td>iOS v12</td>
                    <td>Android v9.0 Pie </td>
                    <td>Android v9.0 with Samsung One UI </td>
                </tr>
                <tr>
                    <th>Sim slots</th>
                    <td>Single SIM, GSM</td>
                    <td>Single SIM, GSM</td>
                    <td>Hybrid SIM slot, GSM</td>
                </tr>
                <tr>
                    <th>Launch date</th>
                    <td>September 12, 2018 (Official)</td>
                    <td>November 1, 2018 (Official)</td>
                    <td>February 20, 2019 (Official)</td>
                </tr>
                <tr>
                    <th>Sim size</th>
                    <td>SIM1: Nano</td>
                    <td>SIM1: Nano</td>
                    <td>SIM1: Nano SIM2: Nano (Hybrid)</td>
                </tr>
                <tr>
                    <th>Network</th>
                    <td>4G: Available (supports Indian bands) 3G: Available, 2G: Available</td>
                    <td>4G: Available (supports Indian bands) 3G: Available, 2G: Available</td>
                    <td>4G: Available (supports Indian bands) 3G: Available, 2G: Available</td>
                </tr>
                <tr>
                    <th>Fingerprint sensor</th>
                    <td>None (Face ID)</td>
                    <td>Back cover</td>
                    <td>In-screen</td>
                </tr>
            </tbody>
            <tbody id="multimedia" data-filter="target">
                <tr class="bg-secondary">
                    <th class="text-uppercase">Multimedia</th>
                    <td><span class="text-dark font-weight-semibold">Apple iPhone Xs Max</span></td>
                    <td><span class="text-dark font-weight-semibold">Google Pixel 3 XL</span></td>
                    <td><span class="text-dark font-weight-semibold">Samsung Galaxy S10+</span></td>
                </tr>
                <tr>
                    <th>Loudspeaker</th>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                </tr>
                <tr>
                    <th>FM radio</th>
                    <td>No</td>
                    <td>No</td>
                    <td>No</td>
                </tr>
                <tr>
                    <th>Headphone jack</th>
                    <td>No</td>
                    <td>No</td>
                    <td>Yes</td>
                </tr>
            </tbody>
            <tbody id="performance" data-filter="target">
                <tr class="bg-secondary">
                    <th class="text-uppercase">Performance</th>
                    <td><span class="text-dark font-weight-semibold">Apple iPhone Xs Max</span></td>
                    <td><span class="text-dark font-weight-semibold">Google Pixel 3 XL</span></td>
                    <td><span class="text-dark font-weight-semibold">Samsung Galaxy S10+</span></td>
                </tr>
                <tr>
                    <th>Processor</th>
                    <td>Apple A12 Bionic</td>
                    <td>Qualcomm Snapdragon 845 (2.5GHz octa-core)</td>
                    <td>Octa-core Qualcomm Snapdragon 855</td>
                </tr>
                <tr>
                    <th>Graphics</th>
                    <td>Apple GPU (4-core graphics)</td>
                    <td>Adreno 630</td>
                    <td>Mali-G72 MP18</td>
                </tr>
                <tr>
                    <th>Architecture</th>
                    <td>64 bit</td>
                    <td>64 bit</td>
                    <td>64 bit</td>
                </tr>
                <tr>
                    <th>RAM</th>
                    <td>4 GB</td>
                    <td>4 GB</td>
                    <td>8 GB</td>
                </tr>
            </tbody>
            <tbody id="design" data-filter="target">
                <tr class="bg-secondary">
                    <th class="text-uppercase">Design</th>
                    <td><span class="text-dark font-weight-semibold">Apple iPhone Xs Max</span></td>
                    <td><span class="text-dark font-weight-semibold">Google Pixel 3 XL</span></td>
                    <td><span class="text-dark font-weight-semibold">Samsung Galaxy S10+</span></td>
                </tr>
                <tr>
                    <th>Build material</th>
                    <td>Case: AluminiumBack: Mineral Glass</td>
                    <td>Case: AluminiumBack: Aluminium</td>
                    <td>Case: AluminiumBack: Mineral Glass</td>
                </tr>
                <tr>
                    <th>Thickness</th>
                    <td>7.7 mm</td>
                    <td>7.9 mm</td>
                    <td>8.5 mm</td>
                </tr>
                <tr>
                    <th>Width</th>
                    <td>70.9 mm</td>
                    <td>76.7 mm</td>
                    <td>73.8 mm</td>
                </tr>
                <tr>
                    <th>Height</th>
                    <td>143.6 mm</td>
                    <td>157.9 mm</td>
                    <td>158.1 mm</td>
                </tr>
                <tr>
                    <th>Weight</th>
                    <td>174 grams</td>
                    <td>175 grams</td>
                    <td>189 grams</td>
                </tr>
                <tr>
                    <th>Waterproof</th>
                    <td>Yes Water resistant (up to 30 minutes in a depth of 1 meter), IP67</td>
                    <td>Yes Water resistant (up to 30 minutes in a depth of 1 meter), IP67</td>
                    <td>Yes Water resistant (up to 30 minutes in a depth of 1.5 meter), IP68</td>
                </tr>
                <tr>
                    <th>Colors</th>
                    <td>Silver, Space Grey</td>
                    <td>Black, Black and White</td>
                    <td>Midnight Black, Coral Blue, Lilac Purple</td>
                </tr>
            </tbody>
            <tbody id="display" data-filter="target">
                <tr class="bg-secondary">
                    <th class="text-uppercase">Display</th>
                    <td><span class="text-dark font-weight-semibold">Apple iPhone Xs Max</span></td>
                    <td><span class="text-dark font-weight-semibold">Google Pixel 3 XL</span></td>
                    <td><span class="text-dark font-weight-semibold">Samsung Galaxy S10+</span></td>
                </tr>
                <tr>
                    <th>Display type</th>
                    <td>Super Retina OLED</td>
                    <td>'flexible' OLED</td>
                    <td>Super AMOLED</td>
                </tr>
                <tr>
                    <th>Pixel density</th>
                    <td>458 ppi</td>
                    <td>522 ppi</td>
                    <td>522 ppi</td>
                </tr>
                <tr>
                    <th>Screen protection</th>
                    <td>Yes</td>
                    <td>Corning Gorilla Glass v5</td>
                    <td>Corning Gorilla Glass v5</td>
                </tr>
                <tr>
                    <th>Screen size</th>
                    <td>6.5 inches</td>
                    <td>6.3 inches</td>
                    <td>6.4 inches</td>
                </tr>
                <tr>
                    <th>Screen resolution</th>
                    <td>1125 x 2436 pixels</td>
                    <td>1440 x 2880 pixels</td>
                    <td>1440 x 2960 pixels </td>
                </tr>
                <tr>
                    <th>Touch screen</th>
                    <td>Yes, 3D Touch Touchscreen, Multi-touch</td>
                    <td>Yes, Capacitive Touchscreen, Multi-touch</td>
                    <td>Yes, Capacitive Touchscreen, Multi-touch</td>
                </tr>
            </tbody>
            <tbody id="storage" data-filter="target">
                <tr class="bg-secondary">
                    <th class="text-uppercase">Storage</th>
                    <td><span class="text-dark font-weight-semibold">Apple iPhone Xs Max</span></td>
                    <td><span class="text-dark font-weight-semibold">Google Pixel 3 XL</span></td>
                    <td><span class="text-dark font-weight-semibold">Samsung Galaxy S10+</span></td>
                </tr>
                <tr>
                    <th>Internal memory</th>
                    <td>64 GB</td>
                    <td>64 GB</td>
                    <td>128 GB</td>
                </tr>
                <tr>
                    <th>Expandable memory</th>
                    <td>No</td>
                    <td>No</td>
                    <td>Yes Up to 1 TB</td>
                </tr>
            </tbody>
            <tbody id="camera" data-filter="target">
                <tr class="bg-secondary">
                    <th class="text-uppercase">Camera</th>
                    <td><span class="text-dark font-weight-semibold">Apple iPhone Xs Max</span></td>
                    <td><span class="text-dark font-weight-semibold">Google Pixel 3 XL</span></td>
                    <td><span class="text-dark font-weight-semibold">Samsung Galaxy S10+</span></td>
                </tr>
                <tr>
                    <th>Settings</th>
                    <td>Exposure compensation, ISO control</td>
                    <td>Exposure compensation, ISO control</td>
                    <td>Exposure compensation</td>
                </tr>
                <tr>
                    <th>Aperture</th>
                    <td>F2.2</td>
                    <td>F2.4</td>
                    <td>F1.7</td>
                </tr>
                <tr>
                    <th>Camera features</th>
                    <td>10 x Digital zoom, Optical zoom, Auto flash, Face detection, Touch to focus</td>
                    <td>Fixed zocus</td>
                    <td>Wide angle selfie</td>
                </tr>
                <tr>
                    <th>Image resolution</th>
                    <td>4000 x 3000 pixels</td>
                    <td>4000 x 3000 pixels</td>
                    <td>4000 x 3000 pixels</td>
                </tr>
                <tr>
                    <th>Sensor</th>
                    <td>BSI sensor</td>
                    <td>CMOS image sensor</td>
                    <td>CMOS image sensor</td>
                </tr>
                <tr>
                    <th>Autofocus</th>
                    <td>Yes</td>
                    <td>No</td>
                    <td>Yes</td>
                </tr>
                <tr>
                    <th>Shooting modes</th>
                    <td>Continuos shooting, High dynamic range mode (HDR), Burst mode</td>
                    <td>Continuos shooting, High dynamic range mode (HDR)</td>
                    <td>Continuos shooting, High dynamic range mode (HDR)</td>
                </tr>
                <tr>
                    <th>Optical image stabilisation</th>
                    <td>Yes, Dual optical image stabilization</td>
                    <td>Yes</td>
                    <td>Yes</td>
                </tr>
                <tr>
                    <th>Flash</th>
                    <td>Yes, Retina flash</td>
                    <td>Yes, Dual LED flash</td>
                    <td>Yes, LED flash</td>
                </tr>
            </tbody>
            <tbody id="battery" data-filter="target">
                <tr class="bg-secondary">
                    <th class="text-uppercase">Battery</th>
                    <td><span class="text-dark font-weight-semibold">Apple iPhone Xs Max</span></td>
                    <td><span class="text-dark font-weight-semibold">Google Pixel 3 XL</span></td>
                    <td><span class="text-dark font-weight-semibold">Samsung Galaxy S10+</span></td>
                </tr>
                <tr>
                    <th>Talktime</th>
                    <td>Up to 21 hours(4G)</td>
                    <td>Up to 24 hours(4G)</td>
                    <td>Up to 25 hours(4G)</td>
                </tr>
                <tr>
                    <th>Quick charging</th>
                    <td>Yes, fast, 50 % in 30 minutes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                </tr>
                <tr>
                    <th>Wireless charging</th>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                </tr>
                <tr>
                    <th>Type</th>
                    <td>Li-ion</td>
                    <td>Li-ion</td>
                    <td>Li-ion</td>
                </tr>
                <tr>
                    <th>Capacity</th>
                    <td>3,174 mAh</td>
                    <td>3,430 mAh</td>
                    <td>4,100 mAh</td>
                </tr>
            </tbody>
            <tbody id="price" data-filter="target">
                <tr class="bg-secondary">
                    <th class="text-uppercase">Price &amp; rating</th>
                    <td><span class="text-dark font-weight-semibold">Apple iPhone Xs Max</span></td>
                    <td><span class="text-dark font-weight-semibold">Google Pixel 3 XL</span></td>
                    <td><span class="text-dark font-weight-semibold">Samsung Galaxy S10+</span></td>
                </tr>
                <tr>
                    <th>Price</th>
                    <td>$1,099</td>
                    <td>$899</td>
                    <td>$1,000</td>
                </tr>
                <tr>
                    <th>Rating</th>
                    <td>4.5/5</td>
                    <td>4.5/5</td>
                    <td>4.5/5</td>
                </tr>
                <tr>
                    <th></th>
                    <td>
                        <button class="btn btn-outline-primary btn-block" type="button" data-toggle="toast" data-target="#cart-toast">Add to Cart</button>
                    </td>
                    <td>
                        <button class="btn btn-outline-primary btn-block" type="button" data-toggle="toast" data-target="#cart-toast">Add to Cart</button>
                    </td>
                    <td>
                        <button class="btn btn-outline-primary btn-block" type="button" data-toggle="toast" data-target="#cart-toast">Add to Cart</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
		</div>
	);
}
export default App;

4. Now we need to add below code into our my-awesome-project/src/App.css file :

body{margin-top:20px;}

.comparison-table {
    width: 100%;
    font-size: .875rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar
}

.comparison-table table {
    min-width: 41rem;
    table-layout: fixed
}

.comparison-table table tbody+tbody {
    border-top-width: 1px
}

.comparison-table .table-bordered thead td {
    border-bottom-width: 1px
}

.comparison-table .comparison-item {
    position: relative;
    padding: .875rem .75rem 1.125rem;
    border: 1px solid #e7e7e7;
    background-color: #fff;
    text-align: center
}

.comparison-table .comparison-item .comparison-item-thumb {
    display: block;
    width: 5rem;
    margin-right: auto;
    margin-bottom: .75rem;
    margin-left: auto
}

.comparison-table .comparison-item .comparison-item-thumb>img {
    display: block;
    width: 100%
}

.comparison-table .comparison-item .comparison-item-title {
    display: block;
    width: 100%;
    margin-bottom: 14px;
    color: #222;
    font-weight: 600;
    text-decoration: none
}

.comparison-table .comparison-item .comparison-item-title:hover {
    text-decoration: underline
}

.comparison-table .comparison-item .btn {
    margin: 0
}

.comparison-table .comparison-item .remove-item {
    display: block;
    position: absolute;
    top: -.3125rem;
    right: -.3125rem;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background-color: #f44336;
    color: #fff;
    text-align: center;
    cursor: pointer
}

.comparison-table .comparison-item .remove-item .feather {
    width: .875rem;
    height: .875rem
}
.table-bordered th, .table-bordered td {
    border: 1px solid #e7e7e7;
}
.bg-secondary {
    background-color: #f7f7f7 !important;
}

Similar snippets

Find more similar snippets using the following tags:Product,comparison

React js template and ui example bs4 shop product list

bs4 shop product list

View
React js template and ui example bs4 product detail

bs4 product detail

View
React js template and ui example product category group

product category group

View
React js template and ui example bs4 Product Shopping Grid Styles

bs4 Product Shopping Grid Styles

View
React js template and ui example bs5 dark footer

bs5 dark footer

View
React js template and ui example profile with data and skills

profile with data and skills

View
React js template and ui example invoice card

invoice card

View
React js template and ui example Chat box

Chat box

View