React js UI example. project progress card

React js UI example and template, project progress card! . 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: card,project,progress

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">
    <div class="row">
        <div class="col-xl-5 mb-3 mb-lg-5">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex flex-column text-center align-items-center">

                        <div class="flex-grow-1 pt-4">
                            <span class="d-block text-muted">Updated 2h ago</span>
                            <h5>Prosperops development</h5>
                            <div class="mb-4">
                                <span class="badge rounded-pill bg-success">In Progress</span>
                            </div>
                            <div class="avatar-group">
                                <a href="#!.html" class="avatar-group-item avatar sm rounded-circle" data-tippy-placement="top" data-tippy-content="Gabriel H">
                                    <img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="..." class="avatar-group-img rounded-circle" />
                                </a>
                                <a href="#!.html" class="avatar-group-item avatar sm rounded-circle" data-tippy-placement="top" data-tippy-content="Emily Doe">
                                    <img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="..." class="avatar-group-img rounded-circle" />
                                </a>
                                <a href="#!.html" class="avatar-group-item avatar sm rounded-circle" data-tippy-placement="top" data-tippy-content="Adam Howkins">
                                    <img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="..." class="avatar-group-img rounded-circle" />
                                </a>
                                <a href="#!.html" class="avatar-group-item d-flex align-items-center justify-content-center bg-gray text-body avatar sm rounded-circle" data-tippy-placement="top" data-tippy-content="6 more members">
                                    <b>+6</b>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                
                <div class="card-footer py-0 border-top">
                    <div class="row">
                        <div class="col text-center p-3">
                            <h4 class="fs-5 mb-1">218</h4>
                            <span class="d-block font-size-sm">Tasks</span>
                        </div>

                        <div class="col p-3 text-center border-end border-start">
                            <h4 class="fs-5 mb-1">468</h4>
                            <span class="d-block font-size-sm">Hours</span>
                        </div>

                        <div class="col p-3 text-center">
                            <h4 class="fs-5 mb-1">14</h4>
                            <span class="d-block font-size-sm">Days left</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>       
        
        <div class="col-xl-5 mb-3 mb-lg-5">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex flex-column text-center align-items-center">
                        <div class="flex-grow-1 pt-4">
                            <span class="d-block text-muted">Updated 2h ago</span>
                            <h5>Prosperops development</h5>
                            <div class="mb-4">
                                <span class="badge rounded-pill bg-success">In Progress</span>
                            </div>
                            <div class="avatar-group">
                                <a href="#!.html" class="avatar-group-item avatar sm rounded-circle" data-tippy-placement="top" data-tippy-content="Gabriel H">
                                    <img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="..." class="avatar-group-img rounded-circle" />
                                </a>
                                <a href="#!.html" class="avatar-group-item avatar sm rounded-circle" data-tippy-placement="top" data-tippy-content="Emily Doe">
                                    <img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="..." class="avatar-group-img rounded-circle" />
                                </a>
                                <a href="#!.html" class="avatar-group-item avatar sm rounded-circle" data-tippy-placement="top" data-tippy-content="Adam Howkins">
                                    <img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="..." class="avatar-group-img rounded-circle" />
                                </a>
                                <a href="#!.html" class="avatar-group-item d-flex align-items-center justify-content-center bg-gray text-body avatar sm rounded-circle" data-tippy-placement="top" data-tippy-content="6 more members">
                                    <b>+6</b>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                
                <div class="card-footer py-0 border-top">
                    <div class="row">
                        <div class="col text-center p-3">
                            <h4 class="fs-5 mb-1">218</h4>
                            <span class="d-block font-size-sm">Tasks</span>
                        </div>

                        <div class="col p-3 text-center border-end border-start">
                            <h4 class="fs-5 mb-1">468</h4>
                            <span class="d-block font-size-sm">Hours</span>
                        </div>

                        <div class="col p-3 text-center">
                            <h4 class="fs-5 mb-1">14</h4>
                            <span class="d-block font-size-sm">Days left</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </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;
background:#eee;
}

.avatar-group .avatar-group-item {
    display: inline-block;
    position: relative;
    margin-left: -0.5rem;
    border: 2px solid var(--bs-card-bg);
}
.avatar.sm {
    width: 2.25rem;
    height: 2.25rem;
    font-size: .818125rem;
}
.avatar-group .avatar-group-item .avatar-group-img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.avatar img {
    max-width: 100%;
    display: block;
}

.avatar-group .avatar-group-item {
    display: inline-block;
    position: relative;
    margin-left: -0.5rem;
    border: 2px solid #000;
}
.avatar.sm {
    width: 2.25rem;
    height: 2.25rem;
    font-size: .818125rem;
}
.avatar-group {
    display: inline-flex;
    align-items: stretch;
}
.bg-gray {
    --bs-bg-opacity: 1;
    background-color: #FF7F50 !important;
}
.card {
    box-shadow: 0 20px 27px 0 rgb(0 0 0 / 5%);
}

Similar snippets

React js template and ui example card features

card features

React js template and ui example bs4 Kanban Board

bs4 Kanban Board

React js template and ui example project details

project details

React js template and ui example product card image tiles

product card image tiles

React js template and ui example bs5 dark footer

bs5 dark footer

React js template and ui example timeline events area

timeline events area

React js template and ui example profile with photos and posts

profile with photos and posts

React js template and ui example dark timeline

dark timeline