{"componentChunkName":"component---src-templates-tags-index-jsx","path":"/tags/html","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"frontmatter":{"title":"Center aligning content with CSS and flex-box","date":"May 15, 2020","path":"blog/center-align-things-with-css","tags":["html","css","reactjs"],"excerpt":"Many a time I noticed that people find it very difficult to align content to the center either vertically or horizontally using CSS. So let's see few ways in how you can align content with css.","cover":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='267'%20viewBox='0%200%20400%20267'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20134v133h401V0H0v134m41-69v12h154V52H41v13m167-1v11h72V52h-72v12m81%203v14h73V52h-73v15m-46%2014c-40%200-36-1-35%2010v5h72v-8l-1-7h-36M41%20109v26h72V83H41v26m82-25v82c0%202%203%202%2036%202h36V83h-36l-36%201m166%2012v10h73V86h-73v10m-82%206v13l1%2012h72v-26h-36l-37%201m83%2015c-1%2010-5%209%2036%209h35v-15h-71v6m-82%2033v18h153v-36H208v18m-167%203v14h36l36%201v-29H41v14m10%2032c-15%203-14%2026%200%2030%207%202%2017-4%2017-9%200-4-5-4-9%200-6%206-15-4-9-11%203-4%206-4%209-1l6%203c3%200%203%200%203-3-2-7-10-11-17-9m30%201c-9%206-4%2018%206%2018%203%200%205%201%205%203-1%202-7%201-8%200l-5-2c-7%200-1%2010%207%2011s13-3%2013-11c0-5-2-7-9-8-6-1-6-1-6-3%201-2%205-2%207-1l4%202c3%200%203-1%203-3-1-7-10-10-17-6m31-1c-5%203-7%2011-3%2015%201%201%204%203%207%203l6%203c0%203-7%203-7%201-1-3-8-3-8%200%200%207%209%2011%2017%208%209-4%208-16-2-18-6-1-7-1-7-3s5-3%206%200c1%202%208%202%208-1%200-7-9-11-17-8m74%200l-3%201v29h18v-7h-10v-11c0-12%200-13-5-12m123%201c-14%207-9%2030%207%2030l6-2c14-7%209-30-6-30l-7%202m-154%2014v15h8v-9h4c4%200%205-1%205-4v-4h-4c-5%200-5%200-5-3s0-3%205-3h5v-7h-18v15m55-12v28l9-1h9v-7h-5c-6%200-6%200-6-2%200-3%200-3%205-3h5v-3c0-4%200-4-5-4-7-1-6-3%201-4h5v-7h-18v3m26-3l4%207%204%207-4%207c-6%209-6%209-1%209%204%200%205%200%207-4l2-4%202%202%203%204c0%202%209%203%209%201l-4-8-5-7%204-6c5-8%205-8%200-8-4%200-4%200-6%204l-2%203-2-3c-2-4-3-4-7-4h-4m34%2015v15h9c8%200%209%200%2011-2%203-3%204-8%202-11-2-2-2-3-1-5v-6c-2-5-4-6-13-6h-8v15m69-11c6%2010%206%2010%201%2017-5%208-5%209%200%209%204%200%204%200%206-4%203-5%204-5%206%200%201%203%202%204%206%204%205%200%205%200%200-9l-5-7%204-6c5-8%205-8%200-8-3%200-4%200-6%204l-2%203-2-3c-2-4-2-4-7-4h-4l3%204m-27%205c-6%204-2%2014%204%2014%203%200%206-4%206-8s-3-8-6-8l-4%202'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.5,"src":"/static/1c65e8062d6b8d416bbfb2c1b729e891/4fe8c/flexbox-css.jpg","srcSet":"/static/1c65e8062d6b8d416bbfb2c1b729e891/aabdf/flexbox-css.jpg 150w,\n/static/1c65e8062d6b8d416bbfb2c1b729e891/9dc27/flexbox-css.jpg 300w,\n/static/1c65e8062d6b8d416bbfb2c1b729e891/4fe8c/flexbox-css.jpg 600w,\n/static/1c65e8062d6b8d416bbfb2c1b729e891/9842e/flexbox-css.jpg 900w,\n/static/1c65e8062d6b8d416bbfb2c1b729e891/8e2a4/flexbox-css.jpg 1140w","sizes":"(max-width: 600px) 100vw, 600px"}}}}}},{"node":{"frontmatter":{"title":"React – The Future Of Web Frontend","date":"January 07, 2019","path":"blog/react–the-future-of-web-frontend","tags":["reactjs","javascript","typescript","html","css"],"excerpt":"Working with ReactJS - A library by facebook was a great experience for me. React has made building web apps easy by making use of reusable components. This is clearly my viewpoint about the library.","cover":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='225'%20viewBox='0%200%20400%20225'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20113v112h401V0H0v113m66-36c-3%203-3%206-3%2015l1%207-5%202c-11%203-15%2011-11%2017%202%203%2012%208%2014%208%201%200%202%202%201%209-1%2017%207%2020%2021%2010l5-4%204%203c5%205%2012%207%2015%206%206-2%207-7%206-21%200-2%200-2%205-4%207-3%2012-8%2012-12s-6-10-13-12l-5-2%201-6c2-12-2-19-10-18l-15%208c-1%201-2%201-4-1-7-7-15-9-19-5m2%203v17h6c4%200%205-1%208-5%204-5%204-5-3-10-5-3-9-4-11-2m32%201l-5%204-3%203%203%204c2%204%203%204%2010%205%204%201%205%201%206-7%201-9-4-13-11-9m50%207c-1%202-2%203-2%2025%200%2025%200%2027%206%2027%205%200%206-1%206-12v-9h8c9%200%2012%202%2012%209%200%209%204%2014%2010%2012%203-1%203-2%202-11-2-12-2-12-5-13l-2-2%202-1c9-5%208-20-2-24-6-3-31-3-35-1m183%204l-1%205c0%203%200%204-3%205-4%201-4%205%200%206h3v13c0%2017%201%2019%2011%2019%205%200%208-1%208-4%200-2-3-4-6-4h-2v-24h3l4-1c1-3%200-5-4-5-3%200-3%200-3-4%200-6-1-8-5-8-3%200-4%201-5%202m-173%2011l1%208%208-1c10%200%2012-1%2012-7-1-6-3-7-13-7h-8v7m-83%203l-3%207%203%205c4%208%205%208%2013%208h6l4-7%203-7-3-6-4-5-7-1h-8l-4%206m140-5c-6%201-7%201-11%204-9%209-8%2027%203%2033s32-1%2026-9c-2-3-3-3-7%201-5%203-12%203-15-1-5-6-4-6%209-6%2014%200%2016%200%2017-4%202-9-11-20-22-18m42%200c-8%201-14%208-11%2012%202%201%205%201%207-1%204-5%2015-5%2015%200%200%204-2%205-9%205-12%202-16%205-16%2013%200%2010%2013%2014%2023%207l3-2%201%203c1%202%207%203%209%201%201-1%200-31-2-33-2-4-11-6-20-5m44%200c-16%203-21%2029-6%2037%208%205%2021%202%2025-5%204-6-3-10-8-4-3%204-8%204-12%201s-4-15%200-19c4-3%208-3%2012%201%207%206%2013%201%207-6-4-4-10-6-18-5m-246%205c-10%205-9%2011%203%2015l6%202%202-5c2-5%202-5%200-10-3-6-4-6-11-2m53%202c-2%205-2%206%200%2010%202%206%203%206%2010%202%2010-5%209-10-1-15-7-3-7-3-9%203m-26%200c-3%203-3%207%201%2010%203%203%206%203%209%200s3-6%200-9c-3-4-7-4-10-1m131%201l-4%204c-2%204-1%204%2010%204%207%200%207-1%207-2-1-5-9-9-13-6m49%2015c-9%201-12%205-6%209%205%203%2013-2%2012-8v-2l-6%201m-196%206c-2%205-1%2014%201%2015%202%203%204%202%209-1%208-5%208-6%204-11-5-5-13-7-14-3m33-1c-3%200-9%206-9%209l10%208c7%203%2010-2%208-13-1-5-1-5-9-4'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.7857142857142858,"src":"/static/ca31f74a20da556b69057d20ff6abaf2/2a4de/preview.png","srcSet":"/static/ca31f74a20da556b69057d20ff6abaf2/6d161/preview.png 150w,\n/static/ca31f74a20da556b69057d20ff6abaf2/630fb/preview.png 300w,\n/static/ca31f74a20da556b69057d20ff6abaf2/2a4de/preview.png 600w,\n/static/ca31f74a20da556b69057d20ff6abaf2/db955/preview.png 900w,\n/static/ca31f74a20da556b69057d20ff6abaf2/f3583/preview.png 1200w,\n/static/ca31f74a20da556b69057d20ff6abaf2/eeb1b/preview.png 1920w","sizes":"(max-width: 600px) 100vw, 600px"}}}}}}]},"allFile":{"edges":[{"node":{"name":"html","childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='206'%20viewBox='0%200%20400%20206'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20103v103h401V0H0v103m143-1l1%2014%201-12V93h4l5%201v41h-3c-3%200-6%203-6%204l46%201h46v-5c0-6%201-7%207-7h4V88H143v14m79-5v6h11V92l-6-1h-5v6m-41-2l1%203%201-1h1c2%202%203%201%203-1l1-2%201%202%201%202%201-2%202-2%201%201c-1%202%201%204%202%202h10l-1-1-1-2c-1-1-2-2-12-2h-11v3m-3%206a1064%201064%200%20003%2030c0%201%209%204%2013%204l6-2c5-1%206-1%206-5%201-3%201-4%202-3%202%200%205-3%203-3v-2c1-1%200-2-1-3-3-1-3-1-2-8%202-9%202-9-15-9l-15%201m6%207l1%206v5h7c5%200%206%200%206%202%200%203-4%204-7%203l-2-2-2-1c-2%200-2%200-2%203%201%203%201%203%205%204h8c3-2%204-2%204-8v-6h-7l-7-1c0-2%201-2%207-2%207%200%208%200%208-2s-1-2-9-2l-10%201m80%206c1%2010%202%2010%2024%2010%2018%200%2018%200%2021-2%202-2%202-4%202-8v-6h-13c-13%200-13%200-14%203-2%204-10%204-12-1-1-1-2-2-5-2h-3v6m-166%200l-1%204c0%204%200%204%203%204l3%201-4%201c-2%200-2%200-2%204v4h4c3%200%204%200%204%202l-4%201h-4v4c0%204%200%204%203%204l3%201-3%201c-3%200-3%200-3%205v4h5l4%201-5%201h-4v5c0%204%200%204%203%204l3%201-3%201c-3%200-3%200-3%204l1%204h13v-62h-6l-7%201m32%200l-7%204c-11%2010-2%2028%2013%2024%2018-5%2012-30-6-28m-4%204c-10%206-6%2022%206%2022%207%200%2012-4%2013-11%201-9-10-16-19-11m120%2012c-9%201-8-2-8%2022l1%2023%2018%201h16l1-3%201-16v-13h-6c-7%200-8-1-9-9v-5l-6-1-8%201m0%2016c2%200%202%201%202%207l-1%206-2%201%202%201c1-1%201%200%201%201l1%202%201-1c0-2%201-2%207-2%205%200%206%200%206%202l1%201v-3h1l2-1v-1c-3%200-3-13%200-13%201-1-4-1-11-1s-11%200-10%201m5%201l-1%206v6h13v-12l-6-1-6%201m-113%207l1%205h98v-9l-50-1h-49v5'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.9466666666666668,"src":"/static/b96221a313314f663a4c45788b837ac6/9317b/html.png","srcSet":"/static/b96221a313314f663a4c45788b837ac6/ea52d/html.png 292w,\n/static/b96221a313314f663a4c45788b837ac6/9317b/html.png 313w","sizes":"(max-width: 313px) 100vw, 313px"}}}}]}},"pageContext":{"tag":"html"}}}