├── .gitattributes
├── .github
    └── workflows
    │   └── node.js.yml
├── .gitignore
├── .yarnclean
├── LICENSE
├── README.md
├── docs
    ├── asset-manifest.json
    ├── favicon.ico
    ├── index.html
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    ├── robots.txt
    └── static
    │   ├── css
    │       ├── main.73bdfe1f.chunk.css
    │       └── main.73bdfe1f.chunk.css.map
    │   └── js
    │       ├── 2.55073e47.chunk.js
    │       ├── 2.55073e47.chunk.js.LICENSE.txt
    │       ├── 2.55073e47.chunk.js.map
    │       ├── main.9aaea712.chunk.js
    │       ├── main.9aaea712.chunk.js.map
    │       ├── runtime-main.6c765582.js
    │       └── runtime-main.6c765582.js.map
├── package.json
├── postcss.config.js
├── public
    ├── favicon.ico
    ├── index.html
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── robots.txt
├── renovate.json
├── src
    ├── App.js
    ├── components
    │   └── stockChart.js
    ├── index.css
    └── index.js
├── static
    └── 1.png
├── tailwind.config.js
└── yarn.lock


/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/.github/workflows/node.js.yml:
--------------------------------------------------------------------------------
 1 | # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
 2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
 3 | 
 4 | name: Node.js build & deploy
 5 | 
 6 | on:
 7 |   push:
 8 |     branches: [ main ]
 9 |   pull_request:
10 |     branches: [ main ]
11 | 
12 | jobs:
13 |   build:
14 | 
15 |     runs-on: ubuntu-latest
16 |     
17 |     steps:
18 |     - uses: actions/checkout@v2
19 |     - uses: actions/setup-node@v2
20 |       with:
21 |         node-version: '16'
22 |     - run: yarn install
23 |     - run: yarn build
24 |     - name: Deploy
25 |       uses: peaceiris/actions-gh-pages@v3
26 |       with:
27 |         github_token: ${{ secrets.GITHUB_TOKEN }}
28 |         publish_dir: ./build
29 |         destination_dir: docs
30 | 
31 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/.yarnclean:
--------------------------------------------------------------------------------
 1 | # test directories
 2 | __tests__
 3 | test
 4 | tests
 5 | powered-test
 6 | 
 7 | # asset directories
 8 | docs
 9 | doc
10 | website
11 | images
12 | assets
13 | 
14 | # examples
15 | example
16 | examples
17 | 
18 | # code coverage directories
19 | coverage
20 | .nyc_output
21 | 
22 | # build scripts
23 | Makefile
24 | Gulpfile.js
25 | Gruntfile.js
26 | 
27 | # configs
28 | appveyor.yml
29 | circle.yml
30 | codeship-services.yml
31 | codeship-steps.yml
32 | wercker.yml
33 | .tern-project
34 | .gitattributes
35 | .editorconfig
36 | .*ignore
37 | .eslintrc
38 | .jshintrc
39 | .flowconfig
40 | .documentup.json
41 | .yarn-metadata.json
42 | .travis.yml
43 | 
44 | # misc
45 | *.md
46 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 John Bi
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Intro
 2 | 
 3 | This project forked from https://codepen.io/ScottWindon/pen/RwrXLJR
 4 | 
 5 | use [React](https://reactjs.org/) , [Tailwind css](https://tailwindcss.com) and [Chart js](https://www.chartjs.org/) build stock card demo project.
 6 | 
 7 | install tips:
 8 | * create react start project see [there](https://github.com/facebook/create-react-app)
 9 | * add tailwind support see [there](https://tailwindcss.com/docs/guides/create-react-app)
10 | * tailwind need craco see [there](https://tailwindcss.com/docs/guides/create-react-app#install-and-configure-craco)
11 | 
12 | # Show
13 | 
14 | [![see in github page](./static/1.png)](https://bxb100.github.io/react-tailwind-chart/)
15 | 
16 | 


--------------------------------------------------------------------------------
/docs/asset-manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "files": {
 3 |     "main.css": "/react-tailwind-chart/static/css/main.73bdfe1f.chunk.css",
 4 |     "main.js": "/react-tailwind-chart/static/js/main.9aaea712.chunk.js",
 5 |     "main.js.map": "/react-tailwind-chart/static/js/main.9aaea712.chunk.js.map",
 6 |     "runtime-main.js": "/react-tailwind-chart/static/js/runtime-main.6c765582.js",
 7 |     "runtime-main.js.map": "/react-tailwind-chart/static/js/runtime-main.6c765582.js.map",
 8 |     "static/js/2.55073e47.chunk.js": "/react-tailwind-chart/static/js/2.55073e47.chunk.js",
 9 |     "static/js/2.55073e47.chunk.js.map": "/react-tailwind-chart/static/js/2.55073e47.chunk.js.map",
10 |     "index.html": "/react-tailwind-chart/index.html",
11 |     "static/css/main.73bdfe1f.chunk.css.map": "/react-tailwind-chart/static/css/main.73bdfe1f.chunk.css.map",
12 |     "static/js/2.55073e47.chunk.js.LICENSE.txt": "/react-tailwind-chart/static/js/2.55073e47.chunk.js.LICENSE.txt"
13 |   },
14 |   "entrypoints": [
15 |     "static/js/runtime-main.6c765582.js",
16 |     "static/js/2.55073e47.chunk.js",
17 |     "static/css/main.73bdfe1f.chunk.css",
18 |     "static/js/main.9aaea712.chunk.js"
19 |   ]
20 | }


--------------------------------------------------------------------------------
/docs/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bxb100/react-tailwind-chart/ee2d933c6c38d621d02a0d186963b293703304f9/docs/favicon.ico


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
1 | <!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/react-tailwind-chart/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/react-tailwind-chart/logo192.png"/><link rel="manifest" href="/react-tailwind-chart/manifest.json"/><title>React App</title><link href="/react-tailwind-chart/static/css/main.73bdfe1f.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function t(t){for(var n,u,i=t[0],l=t[1],c=t[2],p=0,s=[];p<i.length;p++)u=i[p],Object.prototype.hasOwnProperty.call(o,u)&&o[u]&&s.push(o[u][0]),o[u]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(f&&f(t);s.length;)s.shift()();return a.push.apply(a,c||[]),r()}function r(){for(var e,t=0;t<a.length;t++){for(var r=a[t],n=!0,i=1;i<r.length;i++){var l=r[i];0!==o[l]&&(n=!1)}n&&(a.splice(t--,1),e=u(u.s=r[0]))}return e}var n={},o={1:0},a=[];function u(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,u),r.l=!0,r.exports}u.m=e,u.c=n,u.d=function(e,t,r){u.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},u.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},u.t=function(e,t){if(1&t&&(e=u(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(u.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)u.d(r,n,function(t){return e[t]}.bind(null,n));return r},u.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return u.d(t,"a",t),t},u.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},u.p="/react-tailwind-chart/";var i=this["webpackJsonpreact-tailwind-chart"]=this["webpackJsonpreact-tailwind-chart"]||[],l=i.push.bind(i);i.push=t,i=i.slice();for(var c=0;c<i.length;c++)t(i[c]);var f=l;r()}([])</script><script src="/react-tailwind-chart/static/js/2.55073e47.chunk.js"></script><script src="/react-tailwind-chart/static/js/main.9aaea712.chunk.js"></script></body></html>


--------------------------------------------------------------------------------
/docs/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bxb100/react-tailwind-chart/ee2d933c6c38d621d02a0d186963b293703304f9/docs/logo192.png


--------------------------------------------------------------------------------
/docs/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bxb100/react-tailwind-chart/ee2d933c6c38d621d02a0d186963b293703304f9/docs/logo512.png


--------------------------------------------------------------------------------
/docs/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 | 


--------------------------------------------------------------------------------
/docs/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/docs/static/css/main.73bdfe1f.chunk.css:
--------------------------------------------------------------------------------
1 | /* ! tailwindcss v2.0.3 | MIT License | https://tailwindcss.com */
2 | 
3 | /*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */:root{-moz-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"}hr{height:0;color:inherit}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}button{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{background-color:transparent;background-image:none}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}fieldset,ol,ul{margin:0;padding:0}ol,ul{list-style:none}html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5}body{font-family:inherit;line-height:inherit}*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button{cursor:pointer}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}.bg-gray-100{--tw-bg-opacity:1;background-color:rgba(243,244,246,var(--tw-bg-opacity))}.bg-yellow-200{--tw-bg-opacity:1;background-color:rgba(253,230,138,var(--tw-bg-opacity))}.bg-indigo-500{--tw-bg-opacity:1;background-color:rgba(99,102,241,var(--tw-bg-opacity))}.rounded{border-radius:.25rem}.block{display:block}.flex{display:flex}.table{display:table}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-center{justify-content:center}.flex-1{flex:1 1 0%}.font-semibold{font-weight:600}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.leading-5{line-height:1.25rem}.leading-none{line-height:1}.leading-tight{line-height:1.25}.mb-2{margin-bottom:.5rem}.ml-4{margin-left:1rem}.mb-6{margin-bottom:1.5rem}.min-h-screen{min-height:100vh}.overflow-hidden{overflow:hidden}.p-10{padding:2.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.pr-3{padding-right:.75rem}.pl-3{padding-left:.75rem}.pb-4{padding-bottom:1rem}.pt-8{padding-top:2rem}*{--tw-shadow:0 0 transparent}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}*{--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,0.5);--tw-ring-offset-shadow:0 0 transparent;--tw-ring-shadow:0 0 transparent}.text-left{text-align:left}.text-right{text-align:right}.text-white{--tw-text-opacity:1;color:rgba(255,255,255,var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgba(75,85,99,var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity:1;color:rgba(31,41,55,var(--tw-text-opacity))}.text-green-500{--tw-text-opacity:1;color:rgba(16,185,129,var(--tw-text-opacity))}.w-5\/12{width:41.666667%}.w-7\/12{width:58.333333%}.w-full{width:100%}@keyframes spin{to{transform:rotate(1turn)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}@media (min-width:768px){.md\:flex{display:flex}.md\:w-1\/2{width:50%}}
4 | /*# sourceMappingURL=main.73bdfe1f.chunk.css.map */


--------------------------------------------------------------------------------
/docs/static/css/main.73bdfe1f.chunk.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["webpack://src/index.css","<no source>","main.73bdfe1f.chunk.css"],"names":[],"mappings":"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","file":"main.73bdfe1f.chunk.css","sourcesContent":["/* ./src/index.css */\n@tailwind base;\n@tailwind components;\n@tailwind utilities;",null,"/* ./src/index.css */\n\n/* ! tailwindcss v2.0.3 | MIT License | https://tailwindcss.com */\n\n/*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */\n\n/*\nDocument\n========\n*/\n\n/**\nUse a better box model (opinionated).\n*/\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n/**\nUse a more readable tab size (opinionated).\n*/\n\n:root {\n  -moz-tab-size: 4;\n  tab-size: 4;\n}\n\n/**\n1. Correct the line height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n*/\n\nhtml {\n  line-height: 1.15; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/*\nSections\n========\n*/\n\n/**\nRemove the margin in all browsers.\n*/\n\nbody {\n  margin: 0;\n}\n\n/**\nImprove consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)\n*/\n\nbody {\n  font-family:\n\t\tsystem-ui,\n\t\t-apple-system, /* Firefox supports this but not yet `system-ui` */\n\t\t'Segoe UI',\n\t\tRoboto,\n\t\tHelvetica,\n\t\tArial,\n\t\tsans-serif,\n\t\t'Apple Color Emoji',\n\t\t'Segoe UI Emoji';\n}\n\n/*\nGrouping content\n================\n*/\n\n/**\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n*/\n\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n}\n\n/*\nText-level semantics\n====================\n*/\n\n/**\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr[title] {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n\n/**\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/**\n1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)\n2. Correct the odd 'em' font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family:\n\t\tui-monospace,\n\t\tSFMono-Regular,\n\t\tConsolas,\n\t\t'Liberation Mono',\n\t\tMenlo,\n\t\tmonospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/**\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/**\nPrevent 'sub' and 'sup' elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\nTabular data\n============\n*/\n\n/**\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n*/\n\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n}\n\n/*\nForms\n=====\n*/\n\n/**\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  line-height: 1.15; /* 1 */\n  margin: 0; /* 2 */\n}\n\n/**\nRemove the inheritance of text transform in Edge and Firefox.\n1. Remove the inheritance of text transform in Firefox.\n*/\n\nbutton,\nselect { /* 1 */\n  text-transform: none;\n}\n\n/**\nCorrect the inability to style clickable types in iOS and Safari.\n*/\n\nbutton {\n  -webkit-appearance: button;\n}\n\n/**\nRemove the inner border and padding in Firefox.\n*/\n\n/**\nRestore the focus styles unset by the previous rule.\n*/\n\n/**\nRemove the additional ':invalid' styles in Firefox.\nSee: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737\n*/\n\n/**\nRemove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.\n*/\n\nlegend {\n  padding: 0;\n}\n\n/**\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/**\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n/**\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n/**\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n/**\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to 'inherit' in Safari.\n*/\n\n/*\nInteractive\n===========\n*/\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/**\n * Manually forked from SUIT CSS Base: https://github.com/suitcss/base\n * A thin layer on top of normalize.css that provides a starting point more\n * suitable for web applications.\n */\n\n/**\n * Removes the default spacing and border for appropriate elements.\n */\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\n\nbutton {\n  background-color: transparent;\n  background-image: none;\n}\n\n/**\n * Work around a Firefox/IE bug where the transparent `button` background\n * results in a loss of the default `button` focus styles.\n */\n\nbutton:focus {\n  outline: 1px dotted;\n  outline: 5px auto -webkit-focus-ring-color;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nol,\nul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/**\n * Tailwind custom reset styles\n */\n\n/**\n * 1. Use the user's configured `sans` font-family (with Tailwind's default\n *    sans-serif font stack as a fallback) as a sane default.\n * 2. Use Tailwind's default \"normal\" line-height so the user isn't forced\n *    to override it to ensure consistency even when using the default theme.\n */\n\nhtml {\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 1 */\n  line-height: 1.5; /* 2 */\n}\n\n/**\n * Inherit font-family and line-height from `html` so users can set them as\n * a class directly on the `html` element.\n */\n\nbody {\n  font-family: inherit;\n  line-height: inherit;\n}\n\n/**\n * 1. Prevent padding and border from affecting element width.\n *\n *    We used to set this in the html element and inherit from\n *    the parent element for everything else. This caused issues\n *    in shadow-dom-enhanced elements like <details> where the content\n *    is wrapped by a div with box-sizing set to `content-box`.\n *\n *    https://github.com/mozdevs/cssremedy/issues/4\n *\n *\n * 2. Allow adding a border to an element by just adding a border-width.\n *\n *    By default, the way the browser specifies that an element should have no\n *    border is by setting it's border-style to `none` in the user-agent\n *    stylesheet.\n *\n *    In order to easily add borders to elements by just setting the `border-width`\n *    property, we change the default border-style for all elements to `solid`, and\n *    use border-width to hide them instead. This way our `border` utilities only\n *    need to set the `border-width` property instead of the entire `border`\n *    shorthand, making our border utilities much more straightforward to compose.\n *\n *    https://github.com/tailwindcss/tailwindcss/pull/116\n */\n\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: #e5e7eb; /* 2 */\n}\n\n/*\n * Ensure horizontal rules are visible by default\n */\n\nhr {\n  border-top-width: 1px;\n}\n\n/**\n * Undo the `border-style: none` reset that Normalize applies to images so that\n * our `border-{width}` utilities have the expected effect.\n *\n * The Normalize reset is unnecessary for us since we default the border-width\n * to 0 on all elements.\n *\n * https://github.com/tailwindcss/tailwindcss/issues/362\n */\n\nimg {\n  border-style: solid;\n}\n\ntextarea {\n  resize: vertical;\n}\n\ninput::-webkit-input-placeholder, textarea::-webkit-input-placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\n\ninput:-ms-input-placeholder, textarea:-ms-input-placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\n\nbutton {\n  cursor: pointer;\n}\n\ntable {\n  border-collapse: collapse;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/**\n * Reset links to optimize for opt-in styling instead of\n * opt-out.\n */\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/**\n * Reset form element properties that are easy to forget to\n * style explicitly so you don't inadvertently introduce\n * styles that deviate from your design system. These styles\n * supplement a partial reset that is already applied by\n * normalize.css.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  padding: 0;\n  line-height: inherit;\n  color: inherit;\n}\n\n/**\n * Use the configured 'mono' font family for elements that\n * are expected to be rendered with a monospace font, falling\n * back to the system monospace stack if there is no configured\n * 'mono' font family.\n */\n\npre,\ncode,\nkbd,\nsamp {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n}\n\n/**\n * Make replaced elements `display: block` by default as that's\n * the behavior you want almost all of the time. Inspired by\n * CSS Remedy, with `svg` added as well.\n *\n * https://github.com/mozdevs/cssremedy/issues/14\n */\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block;\n  vertical-align: middle;\n}\n\n/**\n * Constrain images and videos to the parent width and preserve\n * their instrinsic aspect ratio.\n *\n * https://github.com/mozdevs/cssremedy/issues/14\n */\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n.bg-gray-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));\n}\n\n.bg-yellow-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgba(253, 230, 138, var(--tw-bg-opacity));\n}\n\n.bg-indigo-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgba(99, 102, 241, var(--tw-bg-opacity));\n}\n\n.rounded {\n  border-radius: 0.25rem;\n}\n\n.block {\n  display: block;\n}\n\n.flex {\n  display: flex;\n}\n\n.table {\n  display: table;\n}\n\n.items-end {\n  align-items: flex-end;\n}\n\n.items-center {\n  align-items: center;\n}\n\n.justify-center {\n  justify-content: center;\n}\n\n.flex-1 {\n  flex: 1 1 0%;\n}\n\n.font-semibold {\n  font-weight: 600;\n}\n\n.text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n\n.text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n\n.text-3xl {\n  font-size: 1.875rem;\n  line-height: 2.25rem;\n}\n\n.leading-5 {\n  line-height: 1.25rem;\n}\n\n.leading-none {\n  line-height: 1;\n}\n\n.leading-tight {\n  line-height: 1.25;\n}\n\n.mb-2 {\n  margin-bottom: 0.5rem;\n}\n\n.ml-4 {\n  margin-left: 1rem;\n}\n\n.mb-6 {\n  margin-bottom: 1.5rem;\n}\n\n.min-h-screen {\n  min-height: 100vh;\n}\n\n.overflow-hidden {\n  overflow: hidden;\n}\n\n.p-10 {\n  padding: 2.5rem;\n}\n\n.px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n\n.py-5 {\n  padding-top: 1.25rem;\n  padding-bottom: 1.25rem;\n}\n\n.px-5 {\n  padding-left: 1.25rem;\n  padding-right: 1.25rem;\n}\n\n.pr-3 {\n  padding-right: 0.75rem;\n}\n\n.pl-3 {\n  padding-left: 0.75rem;\n}\n\n.pb-4 {\n  padding-bottom: 1rem;\n}\n\n.pt-8 {\n  padding-top: 2rem;\n}\n\n* {\n  --tw-shadow: 0 0 #0000;\n}\n\n.shadow-xl {\n  --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n* {\n  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgba(59, 130, 246, 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n}\n\n.text-left {\n  text-align: left;\n}\n\n.text-right {\n  text-align: right;\n}\n\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n.text-gray-600 {\n  --tw-text-opacity: 1;\n  color: rgba(75, 85, 99, var(--tw-text-opacity));\n}\n\n.text-gray-800 {\n  --tw-text-opacity: 1;\n  color: rgba(31, 41, 55, var(--tw-text-opacity));\n}\n\n.text-green-500 {\n  --tw-text-opacity: 1;\n  color: rgba(16, 185, 129, var(--tw-text-opacity));\n}\n\n.w-5\\/12 {\n  width: 41.666667%;\n}\n\n.w-7\\/12 {\n  width: 58.333333%;\n}\n\n.w-full {\n  width: 100%;\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes ping {\n  75%, 100% {\n    transform: scale(2);\n    opacity: 0;\n  }\n}\n\n@keyframes pulse {\n  50% {\n    opacity: .5;\n  }\n}\n\n@keyframes bounce {\n  0%, 100% {\n    transform: translateY(-25%);\n    animation-timing-function: cubic-bezier(0.8,0,1,1);\n  }\n\n  50% {\n    transform: none;\n    animation-timing-function: cubic-bezier(0,0,0.2,1);\n  }\n}\n\n@media (min-width: 640px) {\n}\n\n@media (min-width: 768px) {\n  .md\\:flex {\n    display: flex;\n  }\n\n  .md\\:w-1\\/2 {\n    width: 50%;\n  }\n}\n\n@media (min-width: 1024px) {\n}\n\n@media (min-width: 1280px) {\n}\n\n@media (min-width: 1536px) {\n}\n"]}


--------------------------------------------------------------------------------
/docs/static/js/2.55073e47.chunk.js.LICENSE.txt:
--------------------------------------------------------------------------------
 1 | /*
 2 | object-assign
 3 | (c) Sindre Sorhus
 4 | @license MIT
 5 | */
 6 | 
 7 | /*!
 8 |  * Chart.js v2.9.4
 9 |  * https://www.chartjs.org
10 |  * (c) 2020 Chart.js Contributors
11 |  * Released under the MIT License
12 |  */
13 | 
14 | /** @license React v0.20.1
15 |  * scheduler.production.min.js
16 |  *
17 |  * Copyright (c) Facebook, Inc. and its affiliates.
18 |  *
19 |  * This source code is licensed under the MIT license found in the
20 |  * LICENSE file in the root directory of this source tree.
21 |  */
22 | 
23 | /** @license React v17.0.1
24 |  * react-dom.production.min.js
25 |  *
26 |  * Copyright (c) Facebook, Inc. and its affiliates.
27 |  *
28 |  * This source code is licensed under the MIT license found in the
29 |  * LICENSE file in the root directory of this source tree.
30 |  */
31 | 
32 | /** @license React v17.0.1
33 |  * react-jsx-runtime.production.min.js
34 |  *
35 |  * Copyright (c) Facebook, Inc. and its affiliates.
36 |  *
37 |  * This source code is licensed under the MIT license found in the
38 |  * LICENSE file in the root directory of this source tree.
39 |  */
40 | 
41 | /** @license React v17.0.1
42 |  * react.production.min.js
43 |  *
44 |  * Copyright (c) Facebook, Inc. and its affiliates.
45 |  *
46 |  * This source code is licensed under the MIT license found in the
47 |  * LICENSE file in the root directory of this source tree.
48 |  */
49 | 
50 | //! moment.js
51 | 


--------------------------------------------------------------------------------
/docs/static/js/main.9aaea712.chunk.js:
--------------------------------------------------------------------------------
1 | (this["webpackJsonpreact-tailwind-chart"]=this["webpackJsonpreact-tailwind-chart"]||[]).push([[0],{144:function(e,t,l){},145:function(e,t,l){"use strict";l.r(t);l(4);var s=l(38),i=l.n(s),c=l(39),a=l(0),r=function(e){return e>999999?(e/1e6).toFixed(1)+"M":e},d={legend:{display:!1},scales:{yAxes:[{ticks:{fontColor:"rgba(255, 255, 255, 1)"},gridLines:{display:!1}}],xAxes:[{ticks:{fontColor:"rgba(255, 255, 255, 1)"},gridLines:{color:"rgba(255, 255, 255, .2)",borderDash:[5,5],zeroLineColor:"rgba(255, 255, 255, .2)",zeroLineBorderDash:[5,5]}}]},layout:{padding:{right:10}}},n=function(e){var t,l,s=e.info,i=function(e){var t=e.chartData;return{labels:t.labels,datasets:[{label:"",backgroundColor:"rgba(255, 255, 255, 0.1)",borderColor:"rgba(255, 255, 255, 1)",pointBackgroundColor:"rgba(255, 255, 255, 1)",data:t.data}]}}(s);return Object(a.jsx)(a.Fragment,{children:Object(a.jsxs)("div",{className:"rounded shadow-xl overflow-hidden w-full md:flex",style:{maxWidth:"900px"},children:[Object(a.jsx)("div",{className:"flex w-full md:w-1/2 px-5 pb-4 pt-8 bg-indigo-500 text-white items-center",children:Object(a.jsx)(c.Line,{data:i,options:d})}),Object(a.jsx)("div",{className:"flex w-full md:w-1/2 p-10 bg-gray-100 text-gray-600 items-center",children:Object(a.jsxs)("div",{className:"w-full",children:[Object(a.jsx)("h3",{className:"text-lg font-semibold leading-tight text-gray-800",children:s.stockFullName}),Object(a.jsxs)("h6",{className:"text-sm leading-tight mb-2",children:[Object(a.jsx)("span",{children:s.stockShortName}),"\xa0\xa0-\xa0\xa0Aug 2nd 4:00pm AEST"]}),Object(a.jsxs)("div",{className:"flex w-full items-end mb-6",children:[Object(a.jsx)("span",{className:"block leading-none text-3xl text-gray-800",children:(t=s.price.current,l=3,(t||0).toFixed(l))}),Object(a.jsx)("span",{className:"block leading-5 text-sm ml-4 text-green-500",children:"".concat(s.price.high-s.price.low<0?"\u25bc":"\u25b2"," ").concat((s.price.high-s.price.low).toFixed(3)," (").concat((s.price.high/s.price.low*100-100).toFixed(3),"%)")})]}),Object(a.jsxs)("div",{className:"flex w-full text-xs",children:[Object(a.jsxs)("div",{className:"flex w-5/12",children:[Object(a.jsx)("div",{className:"flex-1 pr-3 text-left font-semibold",children:"Open"}),Object(a.jsx)("div",{className:"flex-1 px-3 text-right",children:s.price.open.toFixed(3)})]}),Object(a.jsxs)("div",{className:"flex w-7/12",children:[Object(a.jsx)("div",{className:"flex-1 px-3 text-left font-semibold",children:"Market Cap"}),Object(a.jsx)("div",{className:"flex-1 pl-3 text-right",children:r(s.price.cap)})]})]}),Object(a.jsxs)("div",{className:"flex w-full text-xs",children:[Object(a.jsxs)("div",{className:"flex w-5/12",children:[Object(a.jsx)("div",{className:"flex-1 pr-3 text-left font-semibold",children:"High"}),Object(a.jsx)("div",{className:"px-3 text-right",children:s.price.high.toFixed(3)})]}),Object(a.jsxs)("div",{className:"flex w-7/12",children:[Object(a.jsx)("div",{className:"flex-1 px-3 text-left font-semibold",children:"P/E ratio"}),Object(a.jsx)("div",{className:"pl-3 text-right",children:s.price.ratio.toFixed(2)})]})]}),Object(a.jsxs)("div",{className:"flex w-full text-xs",children:[Object(a.jsxs)("div",{className:"flex w-5/12",children:[Object(a.jsx)("div",{className:"flex-1 pr-3 text-left font-semibold",children:"Low"}),Object(a.jsx)("div",{className:"px-3 text-right",children:s.price.low.toFixed(3)})]}),Object(a.jsxs)("div",{className:"flex w-7/12",children:[Object(a.jsx)("div",{className:"flex-1 px-3 text-left font-semibold",children:"Dividend yield"}),Object(a.jsx)("div",{className:"pl-3 text-right",children:"".concat(s.price.dividend,"%")})]})]})]})})]})})},x={stockFullName:"SW Limited.",stockShortName:"ASX:SFW",price:{current:2.32,open:2.23,low:2.215,high:2.325,cap:93765011,ratio:20.1,dividend:1.67},chartData:{labels:["10:00","","","","12:00","","","","2:00","","","","4:00"],data:[2.23,2.215,2.22,2.25,2.245,2.27,2.28,2.29,2.3,2.29,2.325,2.325,2.32]}};var o=function(){return Object(a.jsx)("div",{className:"min-w-screen min-h-screen bg-yellow-200  flex items-center justify-center px-5 py-5",children:Object(a.jsx)(n,{info:x})})};l(144);i.a.render(Object(a.jsx)(o,{}),document.getElementById("root"))}},[[145,1,2]]]);
2 | //# sourceMappingURL=main.9aaea712.chunk.js.map


--------------------------------------------------------------------------------
/docs/static/js/main.9aaea712.chunk.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["components/stockChart.js","App.js","index.js"],"names":["formatter","number","toFixed","options","legend","display","scales","yAxes","ticks","fontColor","gridLines","xAxes","color","borderDash","zeroLineColor","zeroLineBorderDash","layout","padding","right","StockChart","fix","info","data","chartData","labels","datasets","label","backgroundColor","borderColor","pointBackgroundColor","buildData","className","style","maxWidth","stockFullName","stockShortName","price","current","high","low","open","cap","ratio","dividend","App","ReactDOM","render","document","getElementById"],"mappings":"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","file":"static/js/main.9aaea712.chunk.js","sourcesContent":["import { Line } from \"react-chartjs-2\";\nimport React from \"react\";\n\nconst formatter = (number) =>\n    number > 999999 ? (number / 1000000).toFixed(1) + \"M\" : number;\n\nconst buildData = ({chartData}) => ({\n    labels: chartData.labels,\n    datasets: [\n        {\n            label: \"\",\n            backgroundColor: \"rgba(255, 255, 255, 0.1)\",\n            borderColor: \"rgba(255, 255, 255, 1)\",\n            pointBackgroundColor: \"rgba(255, 255, 255, 1)\",\n            data: chartData.data,\n        },\n    ],\n});\n\nconst options = {\n    legend: {\n        display: false,\n    },\n    scales: {\n        yAxes: [\n            {\n                ticks: {\n                    fontColor: \"rgba(255, 255, 255, 1)\",\n                },\n                gridLines: {\n                    display: false,\n                },\n            },\n        ],\n        xAxes: [\n            {\n                ticks: {\n                    fontColor: \"rgba(255, 255, 255, 1)\",\n                },\n                gridLines: {\n                    color: \"rgba(255, 255, 255, .2)\",\n                    borderDash: [5, 5],\n                    zeroLineColor: \"rgba(255, 255, 255, .2)\",\n                    zeroLineBorderDash: [5, 5],\n                },\n            },\n        ],\n    },\n    layout: {\n        padding: {\n            right: 10,\n        },\n    },\n};\n\nconst numberToFix = (number, fix) => (number || 0).toFixed(fix)\n\nconst StockChart = ({ info }) => {\n    const data = buildData(info);\n\n    return (\n        <>\n            <div\n                className=\"rounded shadow-xl overflow-hidden w-full md:flex\"\n                style={{ maxWidth: \"900px\" }}\n            >\n                <div className=\"flex w-full md:w-1/2 px-5 pb-4 pt-8 bg-indigo-500 text-white items-center\">\n                    <Line data={data} options={options} />\n                </div>\n                <div className=\"flex w-full md:w-1/2 p-10 bg-gray-100 text-gray-600 items-center\">\n                    <div className=\"w-full\">\n                        <h3 className=\"text-lg font-semibold leading-tight text-gray-800\">\n                            {info.stockFullName}\n                        </h3>\n                        <h6 className=\"text-sm leading-tight mb-2\">\n                            <span>{info.stockShortName}</span>\n                            &nbsp;&nbsp;-&nbsp;&nbsp;Aug 2nd 4:00pm AEST\n                        </h6>\n                        <div className=\"flex w-full items-end mb-6\">\n                            <span className=\"block leading-none text-3xl text-gray-800\">\n                                {numberToFix(info.price.current, 3)}\n                            </span>\n                            <span className=\"block leading-5 text-sm ml-4 text-green-500\">\n                                {`${\n                                    info.price.high - info.price.low <\n                                    0\n                                        ? \"▼\"\n                                        : \"▲\"\n                                } ${(\n                                    info.price.high - info.price.low\n                                ).toFixed(3)} (${(\n                                    (info.price.high /\n                                        info.price.low) *\n                                        100 -\n                                    100\n                                ).toFixed(3)}%)`}\n                            </span>\n                        </div>\n                        <div className=\"flex w-full text-xs\">\n                            <div className=\"flex w-5/12\">\n                                <div className=\"flex-1 pr-3 text-left font-semibold\">\n                                    Open\n                                </div>\n                                <div className=\"flex-1 px-3 text-right\">\n                                    {info.price.open.toFixed(3)}\n                                </div>\n                            </div>\n                            <div className=\"flex w-7/12\">\n                                <div className=\"flex-1 px-3 text-left font-semibold\">\n                                    Market Cap\n                                </div>\n                                <div className=\"flex-1 pl-3 text-right\">\n                                    {formatter(info.price.cap)}\n                                </div>\n                            </div>\n                        </div>\n                        <div className=\"flex w-full text-xs\">\n                            <div className=\"flex w-5/12\">\n                                <div className=\"flex-1 pr-3 text-left font-semibold\">\n                                    High\n                                </div>\n                                <div className=\"px-3 text-right\">\n                                    {info.price.high.toFixed(3)}\n                                </div>\n                            </div>\n                            <div className=\"flex w-7/12\">\n                                <div className=\"flex-1 px-3 text-left font-semibold\">\n                                    P/E ratio\n                                </div>\n                                <div className=\"pl-3 text-right\">\n                                    {info.price.ratio.toFixed(2)}\n                                </div>\n                            </div>\n                        </div>\n                        <div className=\"flex w-full text-xs\">\n                            <div className=\"flex w-5/12\">\n                                <div className=\"flex-1 pr-3 text-left font-semibold\">\n                                    Low\n                                </div>\n                                <div className=\"px-3 text-right\">\n                                    {info.price.low.toFixed(3)}\n                                </div>\n                            </div>\n                            <div className=\"flex w-7/12\">\n                                <div className=\"flex-1 px-3 text-left font-semibold\">\n                                    Dividend yield\n                                </div>\n                                <div className=\"pl-3 text-right\">\n                                    {`${info.price.dividend}%`}\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </>\n    );\n};\n\nexport default StockChart;\n","import React from \"react\";\nimport StockChart from \"./components/stockChart\";\n\nconst data = {\n  stockFullName: \"SW Limited.\",\n  stockShortName: \"ASX:SFW\",\n  price: {\n    current: 2.32,\n    open: 2.23,\n    low: 2.215,\n    high: 2.325,\n    cap: 93765011,\n    ratio: 20.1,\n    dividend: 1.67,\n  },\n  chartData: {\n    labels: [\n      \"10:00\",\n      \"\",\n      \"\",\n      \"\",\n      \"12:00\",\n      \"\",\n      \"\",\n      \"\",\n      \"2:00\",\n      \"\",\n      \"\",\n      \"\",\n      \"4:00\",\n    ],\n    data: [\n      2.23,\n      2.215,\n      2.22,\n      2.25,\n      2.245,\n      2.27,\n      2.28,\n      2.29,\n      2.3,\n      2.29,\n      2.325,\n      2.325,\n      2.32,\n    ],\n  },\n};\n\nfunction App() {\n\n  return (\n    <div className=\"min-w-screen min-h-screen bg-yellow-200  flex items-center justify-center px-5 py-5\">\n      <StockChart info={data} />\n    </div>\n  );\n}\n\nexport default App;\n","import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport App from \"./App\";\nimport \"./index.css\"\n\nReactDOM.render(<App />, document.getElementById(\"root\"));\n"],"sourceRoot":""}


--------------------------------------------------------------------------------
/docs/static/js/runtime-main.6c765582.js:
--------------------------------------------------------------------------------
1 | !function(e){function t(t){for(var n,u,i=t[0],l=t[1],c=t[2],p=0,s=[];p<i.length;p++)u=i[p],Object.prototype.hasOwnProperty.call(o,u)&&o[u]&&s.push(o[u][0]),o[u]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(f&&f(t);s.length;)s.shift()();return a.push.apply(a,c||[]),r()}function r(){for(var e,t=0;t<a.length;t++){for(var r=a[t],n=!0,i=1;i<r.length;i++){var l=r[i];0!==o[l]&&(n=!1)}n&&(a.splice(t--,1),e=u(u.s=r[0]))}return e}var n={},o={1:0},a=[];function u(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,u),r.l=!0,r.exports}u.m=e,u.c=n,u.d=function(e,t,r){u.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},u.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},u.t=function(e,t){if(1&t&&(e=u(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(u.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)u.d(r,n,function(t){return e[t]}.bind(null,n));return r},u.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return u.d(t,"a",t),t},u.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},u.p="/react-tailwind-chart/";var i=this["webpackJsonpreact-tailwind-chart"]=this["webpackJsonpreact-tailwind-chart"]||[],l=i.push.bind(i);i.push=t,i=i.slice();for(var c=0;c<i.length;c++)t(i[c]);var f=l;r()}([]);
2 | //# sourceMappingURL=runtime-main.6c765582.js.map


--------------------------------------------------------------------------------
/docs/static/js/runtime-main.6c765582.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["../webpack/bootstrap"],"names":["webpackJsonpCallback","data","moduleId","chunkId","chunkIds","moreModules","executeModules","i","resolves","length","Object","prototype","hasOwnProperty","call","installedChunks","push","modules","parentJsonpFunction","shift","deferredModules","apply","checkDeferredModules","result","deferredModule","fulfilled","j","depId","splice","__webpack_require__","s","installedModules","1","exports","module","l","m","c","d","name","getter","o","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","p","jsonpArray","this","oldJsonpFunction","slice"],"mappings":"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","file":"static/js/runtime-main.6c765582.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tfunction webpackJsonpCallback(data) {\n \t\tvar chunkIds = data[0];\n \t\tvar moreModules = data[1];\n \t\tvar executeModules = data[2];\n\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(data);\n\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n\n \t\t// add entry modules from loaded chunk to deferred list\n \t\tdeferredModules.push.apply(deferredModules, executeModules || []);\n\n \t\t// run deferred modules when all chunks ready\n \t\treturn checkDeferredModules();\n \t};\n \tfunction checkDeferredModules() {\n \t\tvar result;\n \t\tfor(var i = 0; i < deferredModules.length; i++) {\n \t\t\tvar deferredModule = deferredModules[i];\n \t\t\tvar fulfilled = true;\n \t\t\tfor(var j = 1; j < deferredModule.length; j++) {\n \t\t\t\tvar depId = deferredModule[j];\n \t\t\t\tif(installedChunks[depId] !== 0) fulfilled = false;\n \t\t\t}\n \t\t\tif(fulfilled) {\n \t\t\t\tdeferredModules.splice(i--, 1);\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = deferredModule[0]);\n \t\t\t}\n \t\t}\n\n \t\treturn result;\n \t}\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// undefined = chunk not loaded, null = chunk preloaded/prefetched\n \t// Promise = chunk loading, 0 = chunk loaded\n \tvar installedChunks = {\n \t\t1: 0\n \t};\n\n \tvar deferredModules = [];\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/react-tailwind-chart/\";\n\n \tvar jsonpArray = this[\"webpackJsonpreact-tailwind-chart\"] = this[\"webpackJsonpreact-tailwind-chart\"] || [];\n \tvar oldJsonpFunction = jsonpArray.push.bind(jsonpArray);\n \tjsonpArray.push = webpackJsonpCallback;\n \tjsonpArray = jsonpArray.slice();\n \tfor(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);\n \tvar parentJsonpFunction = oldJsonpFunction;\n\n\n \t// run deferred modules from other chunks\n \tcheckDeferredModules();\n"],"sourceRoot":""}


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "homepage": "https://bxb100.github.io/react-tailwind-chart",
 3 |   "name": "react-tailwind-chart",
 4 |   "version": "0.1.0",
 5 |   "private": true,
 6 |   "dependencies": {
 7 | 
 8 |     "react": "17.0.2",
 9 |     "react-dom": "17.0.2",
10 |     "react-scripts": "5.0.0",
11 |     "web-vitals": "2.1.4",
12 | 
13 |     "chart.js": "3.7.0",
14 |     "react-chartjs-2": "4.0.1",
15 | 
16 |     "tailwindcss": "3.0.16",
17 |     "autoprefixer": "10.4.2",
18 |     "postcss": "8.4.5"
19 |   },
20 |   "scripts": {
21 |     "start": "react-scripts start",
22 |     "build": "react-scripts build",
23 |     "test": "react-scripts test",
24 |     "eject": "react-scripts eject"
25 |   },
26 |   "eslintConfig": {
27 |     "extends": [
28 |       "react-app",
29 |       "react-app/jest"
30 |     ]
31 |   },
32 |   "browserslist": {
33 |     "production": [
34 |       ">0.2%",
35 |       "not dead",
36 |       "not op_mini all"
37 |     ],
38 |     "development": [
39 |       "last 1 chrome version",
40 |       "last 1 firefox version",
41 |       "last 1 safari version"
42 |     ]
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   }
6 | }


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bxb100/react-tailwind-chart/ee2d933c6c38d621d02a0d186963b293703304f9/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>React App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bxb100/react-tailwind-chart/ee2d933c6c38d621d02a0d186963b293703304f9/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bxb100/react-tailwind-chart/ee2d933c6c38d621d02a0d186963b293703304f9/public/logo512.png


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": [
3 |     "config:base"
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import StockChart from "./components/stockChart";
 3 | 
 4 | const data = {
 5 |   stockFullName: "SW Limited.",
 6 |   stockShortName: "ASX:SFW",
 7 |   price: {
 8 |     current: 2.32,
 9 |     open: 2.23,
10 |     low: 2.215,
11 |     high: 2.325,
12 |     cap: 93765011,
13 |     ratio: 20.1,
14 |     dividend: 1.67,
15 |   },
16 |   chartData: {
17 |     labels: [
18 |       "10:00",
19 |       "",
20 |       "",
21 |       "",
22 |       "12:00",
23 |       "",
24 |       "",
25 |       "",
26 |       "2:00",
27 |       "",
28 |       "",
29 |       "",
30 |       "4:00",
31 |     ],
32 |     data: [
33 |       2.23,
34 |       2.215,
35 |       2.22,
36 |       2.25,
37 |       2.245,
38 |       2.27,
39 |       2.28,
40 |       2.29,
41 |       2.3,
42 |       2.29,
43 |       2.325,
44 |       2.325,
45 |       2.32,
46 |     ],
47 |   },
48 | };
49 | 
50 | function App() {
51 | 
52 |   return (
53 |     <div className="min-w-screen min-h-screen bg-yellow-200  flex items-center justify-center px-5 py-5">
54 |       <StockChart info={data} />
55 |     </div>
56 |   );
57 | }
58 | 
59 | export default App;
60 | 


--------------------------------------------------------------------------------
/src/components/stockChart.js:
--------------------------------------------------------------------------------
  1 | import { Line } from 'react-chartjs-2';
  2 | import { Chart as ChartJS, LineElement, PointElement, LinearScale, Title, CategoryScale } from 'chart.js';
  3 | 
  4 | import React from 'react';
  5 | 
  6 | ChartJS.register(LineElement, PointElement, LinearScale, Title, CategoryScale);
  7 | const formatter = (number) => (number > 999999 ? (number / 1000000).toFixed(1) + 'M' : number);
  8 | 
  9 | const buildData = ({ chartData }) => ({
 10 |     labels: chartData.labels,
 11 |     datasets: [
 12 |         {
 13 |             label: '',
 14 |             data: chartData.data,
 15 |             backgroundColor: 'rgba(255, 255, 255, 0.1)',
 16 |             borderColor: 'rgba(255, 255, 255, 1)',
 17 |             pointBackgroundColor: 'rgba(255, 255, 255, 1)',
 18 |             fill: 'start',
 19 |             tension: 0.4,
 20 |         },
 21 |     ],
 22 | });
 23 | 
 24 | const options = {
 25 |     plugins: {
 26 |         legend: {
 27 |             display: false,
 28 |         }
 29 |     },
 30 |     scales: {
 31 |         yAxes: {
 32 |             ticks: {
 33 |                 color: 'rgba(255, 255, 255, 1)'
 34 |             },
 35 |             grid: {
 36 |                 display: false,
 37 |                 drawBorder: false,
 38 |             },
 39 |         },
 40 | 
 41 |         xAxes: {
 42 |             ticks: {
 43 |                 color: 'rgba(255, 255, 255, 1)'
 44 |             },
 45 |             grid: {
 46 |                 circular: true,
 47 |                 borderColor: 'rgba(255, 255, 255, .2)',
 48 |                 color: 'rgba(255, 255, 255, .2)',
 49 |                 borderDash: [5, 5]
 50 |             },
 51 |         },
 52 |     },
 53 |     layout: {
 54 |         padding: {
 55 |             right: 10,
 56 |         },
 57 |     },
 58 | };
 59 | 
 60 | const numberToFix = (number, fix) => (number || 0).toFixed(fix);
 61 | 
 62 | const StockChart = ({ info }) => {
 63 |     const data = buildData(info);
 64 | 
 65 |     return (
 66 |         <>
 67 |             <div className="rounded shadow-xl overflow-hidden w-full md:flex" style={{ maxWidth: '900px' }}>
 68 |                 <div className="flex w-full md:w-1/2 px-5 pb-4 pt-8 bg-indigo-500 text-white items-center">
 69 |                     <Line type="line" data={data} options={options} />
 70 |                 </div>
 71 |                 <div className="flex w-full md:w-1/2 p-10 bg-gray-100 text-gray-600 items-center">
 72 |                     <div className="w-full">
 73 |                         <h3 className="text-lg font-semibold leading-tight text-gray-800">{info.stockFullName}</h3>
 74 |                         <h6 className="text-sm leading-tight mb-2">
 75 |                             <span>{info.stockShortName}</span>
 76 |                             &nbsp;&nbsp;-&nbsp;&nbsp;Aug 2nd 4:10pm AEST
 77 |                         </h6>
 78 |                         <div className="flex w-full items-end mb-6">
 79 |                             <span className="block leading-none text-3xl text-gray-800">{numberToFix(info.price.current, 3)}</span>
 80 |                             <span className="block leading-5 text-sm ml-4 text-green-500">
 81 |                                 {`${info.price.high - info.price.low < 0 ? '▼' : '▲'} ${(info.price.high - info.price.low).toFixed(3)} (${((info.price.high / info.price.low) * 100 - 100).toFixed(3)}%)`}
 82 |                             </span>
 83 |                         </div>
 84 |                         <div className="flex w-full text-xs">
 85 |                             <div className="flex w-5/12">
 86 |                                 <div className="flex-1 pr-3 text-left font-semibold">Open</div>
 87 |                                 <div className="flex-1 px-3 text-right">{info.price.open.toFixed(3)}</div>
 88 |                             </div>
 89 |                             <div className="flex w-7/12">
 90 |                                 <div className="flex-1 px-3 text-left font-semibold">Market Cap</div>
 91 |                                 <div className="flex-1 pl-3 text-right">{formatter(info.price.cap)}</div>
 92 |                             </div>
 93 |                         </div>
 94 |                         <div className="flex w-full text-xs">
 95 |                             <div className="flex w-5/12">
 96 |                                 <div className="flex-1 pr-3 text-left font-semibold">High</div>
 97 |                                 <div className="px-3 text-right">{info.price.high.toFixed(3)}</div>
 98 |                             </div>
 99 |                             <div className="flex w-7/12">
100 |                                 <div className="flex-1 px-3 text-left font-semibold">P/E ratio</div>
101 |                                 <div className="pl-3 text-right">{info.price.ratio.toFixed(2)}</div>
102 |                             </div>
103 |                         </div>
104 |                         <div className="flex w-full text-xs">
105 |                             <div className="flex w-5/12">
106 |                                 <div className="flex-1 pr-3 text-left font-semibold">Low</div>
107 |                                 <div className="px-3 text-right">{info.price.low.toFixed(3)}</div>
108 |                             </div>
109 |                             <div className="flex w-7/12">
110 |                                 <div className="flex-1 px-3 text-left font-semibold">Dividend yield</div>
111 |                                 <div className="pl-3 text-right">{`${info.price.dividend}%`}</div>
112 |                             </div>
113 |                         </div>
114 |                     </div>
115 |                 </div>
116 |             </div>
117 |         </>
118 |     );
119 | };
120 | 
121 | export default StockChart;
122 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | /* ./src/index.css */
2 | @tailwind base;
3 | @tailwind components;
4 | @tailwind utilities;


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import App from "./App";
4 | import "./index.css"
5 | 
6 | ReactDOM.render(<App />, document.getElementById("root"));
7 | 


--------------------------------------------------------------------------------
/static/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bxb100/react-tailwind-chart/ee2d933c6c38d621d02a0d186963b293703304f9/static/1.png


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   mode: "jit",
 3 |   content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
 4 |   theme: {
 5 |     extend: {},
 6 |   },
 7 |   variants: {
 8 |     extend: {},
 9 |   },
10 |   plugins: [],
11 | }
12 | 


--------------------------------------------------------------------------------